Làm nổi bật Code với thư viện Javascript SyntaxHighlighter
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
Tài liệu được viết dựa trên:
-
SyntaxHighlighter 3.0.83
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.
Kết quả download:
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:
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:
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:
*
