Hervorhebung Code mit SyntaxHighlighter Javascript-Bibliothek

View more categories:

1- Die Vorstellung

Das Dokument wird nach Quelle  von ... geschrieben:
  • SyntaxHighlighter 3.0.83

2- Was ist SyntaxHighlighter?

SyntaxHighlighter ist eine geschlossene Code mit der vollen Funktionen, die auf JavaScript im Jahr von 2004 von Herrn  Alex Gorbatchev entwickelt wird. Seit der Entstehung wurde es sehr breit durch die  großen und kleinen Website und auch die Applikation wie  Apache, Aptana, Mozilla, Yahoo, WordPress, Bug Labs, Freshbooks.benutzt
Syntax highlighting ist ein Funktion von einigen Textbearbeiter zur Textanzeige, besonders wird die Quelle-Kode nach der unterschiedlichen Farbe und Schriftart der Wörter angezeigt.  Die Funktion hilft bei der Verminderung der Benutzung der markup language um eines Kode-Stück hervorzuheben. Highlighting beeinflusst die Bedeutung von Quelletext nicht, es hilft den Benutzer, leicht und einfach die Kode Inhalt zu lesen und dem Bearbeiter beim Artikel-Schreiben

3- Download SyntaxHighlighter

Das Ergebnis von dem Herunterladen

4- SyntaxHighlighter benutzen

Dekomprimieren Sie die heruntergeladete File
SyntaxHighlighter 3.0.83 unterstützt bei dem Hervorheben der Syntax für die Programmierungsprache
  • AppleScript
  • AS3
  • Bash
  • ColdFusion
  • .....
  • Java
  • JScript
  • ....
Sie können die File  javascript zum Hervorheben der code für die unterschiedlichen Programmierungssprache bei ... sehen
  • <SyntaxHightlighter>/scripts
Erstellen Sie den Ordner  examples, Die Beispiele im Dokument werden in diesem Ordner gestellt
Sehen Sie bitte ein Beispiel zum Hervorheben für die JavaScript Code.
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>
Online probieren
Das Beispiel über das Highlight der Code  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>
Online probieren

5- Die Stil (Style) ändern

Sehen und vergleichen Sie   "Code Javascript" zwischen die Anzeige auf die standardmäßige style und auf die Eclipse style und  Django style.
SyntaxHighlighter bietet Sie viele style, die Sie in dem Ordner sehen können
  • <SyntaxHighlighter>/styles
Zum Beispiel  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>
Online probieren

6- CKEditor-SyntaxHighlight Plugin

CKEditor-SyntaxHighlight ist ein  addon von  CKEditor. Er kann in der Textbearbeiter CKEditor intergriert werden, damit Sie bei der Textbearbeitung duch SyntaxHighlighter , die Sie im Dokument sehen, hervorheben (highlighting) können
Sie können die Hinweise für die Integration von  CKEditor-SyntaxHighlight in  CKEditor bei:  sehen

View more categories: