Làm nổi bật Code với thư viện Javascript SyntaxHighlighter
Công ty Vĩnh Cửu tuyển dụng lập trình viên Java

1- Giới thiệu

Tài liệu được viết dựa trên:
  • SyntaxHighlighter 3.0.83

2- SyntaxHighlighter là gì?

SyntaxHighlighter là một mã khép kín với đầy đủ chức năng được phát triển trên JavaScript bởi Alex Gorbatchev năm 2004. Kể từ khi nó được phát minh, nó đã được sử dụng rộng rãi bởi cả hai trang web lớn và nhỏ và các ứng dụng như Apache, Aptana, Mozilla, Yahoo, WordPress, Bug Labs, Freshbooks.

Làm nổi bật cú pháp ( Syntax highlighting) là một tính năng của một số trình soạn thảo văn bản hiển thị văn bản, đặc biệt là mã nguồn được hiển thị theo các màu sắc khác nhau và các phông chữ theo các thể loại từ ngữ. Tính năng này giúp giảm bớt phải viết bằng một ngôn ngữ đánh dấu để làm nổi bật một đoạn code. Highlighting không ảnh hưởng đến ý nghĩa của các văn bản gốc, nó chỉ dành cho nguời đọc dễ dàng đọc nội dung code, và các biên tập viên viết bài.

3- Download SyntaxHighlighter

Kết quả download:

4- Sử dụng SyntaxHighlighter

Giải nén file bạn vừa download được:
SyntaxHighlighter 3.0.83 hỗ trợ làm nổi bật cú pháp mã cho các ngôn ngữ lập trình:
 
  • AppleScript
  • AS3
  • Bash
  • ColdFusion
  • .....
  • Java
  • JScript
  • ....
Bạn có thể nhìn thấy các file javascript để làm Highlight code cho các ngôn ngữ lập trình khác nhau tại:
  • <SyntaxHightlighter>/scripts
Tạo thư mục examples, các ví dụ trong tài liệu này sẽ được đặt tại thư mục này.
Hãy xem một ví dụ làm nổi bật mã của JavaScript.
  • example_javascript_default.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>SyntaxHighlighter - JavaScript example</title>
   
   <!-- Thư viện cơ bản của SyntaxHighlighter -->
   <script type="text/javascript" src="../scripts/shCore.js"></script>
   
   <!-- Thư viện Highlight cho Javascript -->
   <script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
   
   <!-- Sử dụng Style mặc định -->
   <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 tất cả các code -->    
<script type="text/javascript">
   SyntaxHighlighter.all();
</script>    
   
</body>
</html>
Thử trực tuyến:
Ví dụ làm nổi bật code Java & Javascript:
  • example_sh_default.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>SyntaxHighlighter - JavaScript + Java example</title>
   
   <!-- Thư viện cơ bản của SyntaxHighlighter -->
   <script type="text/javascript" src="../scripts/shCore.js"></script>
   
   <!-- Thư viện Highlight cho Javascript -->
   <script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
   
   <!-- Thư viện Highlight cho Java -->
   <script type="text/javascript" src="../scripts/shBrushJava.js"></script>    
   
   <!-- Sử dụng Theme mặc định -->
   <link type="text/css" rel="stylesheet" href="../styles/shCoreDefault.css"/>    
   
   
</head>
<body>

<h2>Highlight Java, JavaScript Code - Default theme</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 tất cả các code -->    
<script type="text/javascript">
   SyntaxHighlighter.all();
</script>    
   
</body>
</html>
Thử trực tuyến:

5- Thay đổi Style

Bạn hãy xem và so sánh "Code Javascript" hiển thị trên Style mặc định và Eclipse Style, Django Style.
SyntaxHighlighter cung cấp cho bạn rất nhiều các Style, bạn có thể nhìn thấy trong thư mục:
  • <SyntaxHighlighter>/styles
Ví dụ Eclipse Style:
  • example_sh_eclipse.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>SyntaxHighlighter - JavaScript + Java example</title>
   
   <!-- Thư viện cơ bản của SyntaxHighlighter -->
   <script type="text/javascript" src="../scripts/shCore.js"></script>
   
   <!-- Thư viện Highlight cho Javascript -->
   <script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
   
   <!-- Thư viện Highlight cho Java -->
   <script type="text/javascript" src="../scripts/shBrushJava.js"></script>    
   
   <!-- Sử dụng 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 tất cả các code -->    
<script type="text/javascript">
   SyntaxHighlighter.all();
</script>    
   
</body>
</html>
Thử trực tuyến:

6- CKEditor-SyntaxHighlight Plugin

CKEditor-SyntaxHighlight là một addon của CKEditor, nó có thể tích hợp vào trình soạn thảo văn bản CKEditor cho phép bạn soạn thảo ra văn bản có thể được Highlighting bởi SyntaxHighlighter mà bạn đang xem trong tài liệu này.
Bạn có thể xem hướng dẫn tich hợp CKEditor-SyntaxHighlight vào CKEditor tại: