betacode

Выделение кода с помощью библиотеки Javascript SyntaxHighlighter

  1. Введение
  2. Что такое SyntaxHighlighter?
  3. Download SyntaxHighlighter
  4. Использовать SyntaxHighlighter
  5. Изменить Style
  6. CKEditor-SyntaxHighlight Plugin

1. Введение

Статья основана на:

  • SyntaxHighlighter 3.0.83

2. Что такое SyntaxHighlighter?

SyntaxHighlighter это полнофунциональная подсветка синтаксиса кода разработанная в JavaScriptАлексом Горбачевым в 2004 году. С момента изобретения, была широко использована большими и малыми веб страницами и приложениями как Apache, Aptana, Mozilla, Yahoo, WordPress, Bug Labs, Freshbooks.
Подсветка синтаксиса (Syntax highlighting) это функция некоторых текстовых редакторов, отображающие текст, особенно исходный код, в разных цветах и шрифтах в зависимости от категории терминов. Эта функция облегчает запись на структурированном языке, например язык программирования или язык разметки (markup language), чтобы выделить часть кода. Highlighting (подсветка) не влияет на оригинальное значение текста, а позвляет пользователю легко прочитать содержание кода и редактировать.

3. Download SyntaxHighlighter

Результат скачивания:

4. Использовать SyntaxHighlighter

Извлеките скачанный файл:
SyntaxHighlighter 3.0.83 помогает выделить синтаксис для языкового программирования:
  • AppleScript
  • AS3
  • Bash
  • ColdFusion
  • .....
  • Java
  • JScript
  • ....
Вы можете увидеть файлы javascript для выделения code на разных языках программирования:
  • <SyntaxHightlighter>/scripts
Создать папку examples, примеры данной статье будут находиться в данной папке.
Давайте посмотрим пример выделения кода JavaScript.
example_javascript_default.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SyntaxHighlighter - JavaScript example</title>
 
   <!-- SyntaxHighlighter core library -->
  <script type="text/javascript" src="../scripts/shCore.js"></script>
 
  <!-- Library highlights the javascript code -->
  <script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
 

  <!-- Using default Style -->
  <link type="text/css" rel="stylesheet" href="../styles/shCoreDefault.css"/>
 
</head>
<body>

<h2>Highlight JavaScript Code - Default Style</h2>
 
<h3>JavaScript Code:</h3>    
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
  return "hi!";
}
</pre>

 
<!-- Highlight all -->    
<script type="text/javascript">
  SyntaxHighlighter.all();
</script>    
 
</body>
</html>
Запуск примера:
Пример выделения кода Java & Javascript:
example_sh_default.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>SyntaxHighlighter - JavaScript + Java example</title>
   
 
   <!-- SyntaxHighlighter core library -->
   <script type="text/javascript" src="../scripts/shCore.js"></script>
   
 
   <!-- Library highlights the javascript code -->
   <script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
   

   <!-- Library highlights the Java code -->
   <script type="text/javascript" src="../scripts/shBrushJava.js"></script>    
   

   <!-- Using default Style -->
   <link type="text/css" rel="stylesheet" href="../styles/shCoreDefault.css"/>    
   
   
</head>
<body>

<h2>Highlight Java, JavaScript Code - Default style</h2>
   
<h3>JavaScript Code:</h3>    
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
   return "hi!";
}
</pre>

<h3>Java Code:</h3>    
<pre class="brush: java;">
public class JavaClass  {
   public static void main(String[] args)  {
       System.out.println("Hello World!");
   }
}
</pre>

   
<!-- Highlight all -->  
<script type="text/javascript">
   SyntaxHighlighter.all();
</script>    
   
</body>
</html>
Запуск примера:

5. Изменить Style

Посмотрите и сравните "Code Javascript" отображающий style (стиль) по умолчанию и стиль Eclipse style, Django style.
SyntaxHighlighter предлагает вам много разных c style, вы можете увидеть в папке:
  • <SyntaxHighlighter>/styles
Пример Eclipse style:
example_sh_eclipse.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SyntaxHighlighter - JavaScript + Java example</title>
    
   
    <!-- SyntaxHighlighter core library -->
    <script type="text/javascript" src="../scripts/shCore.js"></script>
    
 
    <!-- Library highlights the javascript -->
    <script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
    
 
    <!-- Library highlights the Java -->
    <script type="text/javascript" src="../scripts/shBrushJava.js"></script>    
    
 
    <!-- Using eclipse style -->
    <link type="text/css" rel="stylesheet" href="../styles/shCoreEclipse.css"/>    
    
    
</head>
<body>

<h2>Highlight Java, JavaScript Code - Eclipse style</h2>
    
<h3>JavaScript Code:</h3>    
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
    return "hi!";
}
</pre>

<h3>Java Code:</h3>    
<pre class="brush: java;">
public class JavaClass  {
    public static void main(String[] args)  {
        System.out.println("Hello World!");
    }
}
</pre>

    
  
<!-- Highlight all -->
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>     
    
</body>
</html>
Запуск примера:

6. CKEditor-SyntaxHighlight Plugin

CKEditor-SyntaxHighlight это addon (дополнение) в CKEditor, который может интегрироваться в текстовом редакторе CKEditor и позволяет вам создавать текст с подсветкой (Highlighting) через SyntaxHighlighter который вы смотрите в этой статье.
Смотрите руководство по интегрированию CKEditor-SyntaxHighlight в CKEditor по ссылке:

Pуководства ECMAScript, Javascript

Show More

Pуководства ECMAScript, Javascript

Show More

Новейшие статьи

    Show More