codestory

Hervorhebung Code mit SyntaxHighlighter Javascript-Bibliothek

  1. Die Vorstellung
  2. Was ist SyntaxHighlighter?
  3. Download SyntaxHighlighter
  4. SyntaxHighlighter benutzen
  5. Die Stil (Style) ändern
  6. CKEditor-SyntaxHighlight Plugin

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

Anleitungen ECMAScript, Javascript

Show More

Anleitungen ECMAScript, Javascript

Show More

Neueste Artikel

Show More