Làm nổi bật Code với thư viện Javascript SyntaxHighlighter

Giới thiệu
SyntaxHighlighter là gì?
Download SyntaxHighlighter
Sử dụng SyntaxHighlighter
Thay đổi Style
CKEditor-SyntaxHighlight Plugin

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 (markup language) để 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

https://github.com/syntaxhighlighter/syntaxhighlighter/releases/tag/3.0.83

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 nổi bật 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ã cho mã 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 (kiểu dáng) 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 (phần thêm vào) 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 nổi bật hóa (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:

Cài đặt CKEditor-Syntaxhighlight Plugin cho CKEditor

Làm nổi bật Code với thư viện Javascript SyntaxHighlighter

1. Giới thiệu

SyntaxHighlighter 3.0.83

2. SyntaxHighlighter là gì?

3. Download SyntaxHighlighter

4. Sử dụng SyntaxHighlighter

5. Thay đổi Style

6. CKEditor-SyntaxHighlight Plugin

Các hướng dẫn ECMAScript, Javascript

Các hướng dẫn ECMAScript, Javascript

Các bài viết mới nhất