Cơ bản về syntax highlighter

Tham khảo SyntaxHighlighter . Bạn có thể download về để thử các chức năng của SyntaxHighlighter.

Syntax highlighter (SH) là bộ công cụ được viết bằng javascript dùng để làm đẹp code cho trang blog của bạn. Để thấy rõ, hãy xem 1 đoạn code sử dụng SH và 1 không sử dụng như dưới đây.

Không sử dụng SH

<div id="wrapper">
    <div class="center">
    </div>
</div>

Sử dụng SH

<div id="wrapper">
    <div class="center">
    </div>
</div>

Sự khác biệt rất rõ ràng, SH giúp đoạn code được đánh số dòng, hiển thị giống như 1 trình editor và có chức năng làm nổi bật dòng code (dòng 1 + 3)...Và các chức năng khác hay hơn nữa.

Cài đặt và sử dụng

Có thể tóm tắt trong 3 bước:

1. Thêm CSS
2. Thêm Javascript
3. Định dạng đoạn code

Cụ thể

1. Add base files to your page: shCore.js and shCore.css
2. Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)
3. Include shCore.css and shThemeDefault.css
4. Create a code snippet with either <pre> or <script> method
5. Call SyntaxHighlighter.all() JavaScript method

Bạn có thể download bộ SH về và tải các file lên host riêng, hoặc đơn giản là sử dụng host có sẵn của tác giả. Tham khảo SyntaxHighlighter hosting

Bước 1

Template > Edit HTML

Bước 2

Click chuột vào vùng html (bất kỳ chỗ nào) và bấm Ctrl + F sau đó nhập thẻ </head> để tìm kiếm

Sau đó nhập vào đoạn code sau trên thẻ </head>:

Các dòng bắt buộc là 1, 2, 3 và ít nhất 1 dòng khác còn lại (đó chính là "bút vẽ" để vẽ các dòng).

Bước 3

Tiếp tục tìm với thẻ </body> và nhập đoạn code sau trên thẻ </body>:

Bước 4

Sử dụng bằng cách chèn đoạn code cần thể hiện trong thẻ <pre> như sau: