Wednesday, July 09, 2008

Cách đơn giản để nhúng và tô màu mã lệnh (code) trong trang web

Trên Thủ Thuật Blog đã có bài "Đặt code trong khung trên bài viết của Blogger", tuy nhiên chỉ mới đáp ứng được vấn đề căn hàng và font chữ. Ở đây tôi xin giới thiệu một cách rất đơn giản để nhúng mọi loại code vào bài viết và tô màu sao cho dễ đọc, tất cả đều thực hiện ở phía client mà không cần phải thay đổi gì ở phía web server cả.
Thư viện chúng ta sử dụng ở đây là Google Code Prettify (mà JavaVietnam.org cũng đang sử dụng). Bạn chỉ cần CSS và JavaScript, có thể download về đặt lên server hoặc sử dụng trực tiếp từ thư mục src của Google Code. Các bước thực hiện như sau:
  1. Đặt 2 dòng code sau vào trang web của bạn:
    <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
    Tốt nhất là đặt bên trong cặp thẻ <head>...</head>
  2. Gọi phương thức prettyPrint() trong thuộc tính onload của thẻ <body>. Ví dụ:
    <body onload="prettyPrint()">
  3. Từ đó về sau, nếu cần tô màu bất kỳ đoạn code nào, bạn chỉ cần bọc nó trong cặp thẻ:
    <pre class="prettyprint">...</pre>
    hoặc
    <code class="prettyprint">...</code>
    Cái hay ở đây là Google Code Prettify sẽ tự động đoán ra ngôn ngữ để tô màu cho phù hợp.
Hãy xem thử đoạn code Java mẫu tôi nhúng dưới đây (dùng cặp thẻ <pre class="prettyprint">...</pre> nên có thể bị khuất chữ):
/** * @author khanhlnq */public class JVNMobileGISMIDlet extends MIDlet {    public static final String PROPERTY_MIDLET_VERSION = "MIDlet-Version";    private ModelFacade model;    UIController controller;        protected void destroyApp(boolean unconditional) {        try {            System.out.println(model);            model.destroy();        } catch (ApplicationException ae) {            ae.printStackTrace();            System.err.println(ae.getException() + "/" + ae.getMessage() + "/"                    + ae.getCode());        }    }    protected void pauseApp() {    }
Chúc bạn thành công!

10 comments:

Thang Le said...

Thank you very much for this post. You already used this script in your template, didn't you? Please tell me if it can slow the loading speed of your page down?
Oops, you should remove the Word Verification out of comment option. It is extremely annoying for commentators who want to leave their messages on your blog.

Step² said...

Hi anh Thắng,
Yes, I did embed Code Prettify in this post and saw no effect to loading speed. You will be surprised too :)
About Word Verification, I'm sorry but I have to turn it on to prevent spamming.

dv2n said...

Thank you, Step2, this is a good suggestion.

Án Bình Trọng said...

Bài viết rất hay, nhưng mình nghe nói trên bo-blog có plugin hiện mã ngôn ngữ lập trình như notepad++.

Án Bình Trọng said...

Nó không hoạt động được với code HTML và CSS

KhanhLNQ said...

@Án Bình Trọng: Có thể là do mã nguồn HTML và CSS của bạn không được encode, dẫn đến các thẻ HTML sẽ lồng nhau làm cho Google Code Prettify không dò ra được.

Án Bình Trọng said...

Bạn thử cách này xem, mình lấy đoạn mã trên http://code .google.com đó. Nhưng nó hơi rắc rối. Đây là bài viết của mình http://www.khoahockithuat.co.cc/2008/08/lm-cch-no-t-on-code-trn-bi-vit-ca.html

KhanhLNQ said...

@Án Bình Trọng: Bài này giới thiệu đầy đủ tất cả các cách http://hongjun.blogspot.com/2008/07/how-to-insert-code-snippet-on-blogger.html
P.S. Sao blog của bạn không cho comment nhỉ?

Án Bình Trọng said...

Àh, xin lỗi. Hồi đó google mới ra dịch vụ nên mình đăng kí, rồi nhấp lung tung. Tới bây giờ mới viết nên thấy blog mình không ai để lại comment.
Mình thành thật xin lỗi nhé.
Cho mình hỏi phần nhận xét nên chọn bất kì ai hay người dùng đã đăng kí? Không biết cái nào tốt hơn?

KhanhLNQ said...

@Án Bình Trọng: Phần nhận xét trên blog nên chọn Bất kỳ ai sẽ tốt hơn. Nhưng nhớ là bật chế độ xác thực để tránh spam.

Post a Comment

(Vui lòng không dùng 'Anonymous' khi để lại comment /
Please do not leave an anonymous comment)

Nhập địa chỉ email để nhận cập nhật /
Enter your email address to receive updates:

Delivered by FeedBurner