Highlight html code đơn giản bằng PHP

14/02/2014

highlight-html-code

Xem Demo

Thông thường, khi chúng ta cần chia sẻ một đoạn code nào đó cho bạn bè của mình, thì chúng ta sẽ gặp phải vấn đề là đoạn code chúng ta chia sẻ thường khó đọc vì chúng cùng màu với màu chữ và khiến người nhận khó nhận ra đâu là đoạn code, đâu là chữ viết. Như trong trang blog của mình, khi chia sẻ code, những đoạn code thường được đổi màu sao cho người đọc dễ nhìn và phân biệt nó so với phần còn lại trong nội dung.
Trong bài viết này, mình sẽ chia sẻ cho các bạn một đoạn code đơn giản bằng PHP, giúp chúng ta Highlight ( tức là làm đoạn code nổi bật hơn so với chữ viết ) các đoạn code html, điều này sẽ giúp ích cho các bạn trong việc tạo một trang web chia sẻ code.Và sau đây là đoạn code bằng PHP sẽ giúp các bạn làm điều này, các bạn chỉ cần việc copy lại và sử dụng cho những mục đích riêng của mình sau này :

function highlight_html($string, $decode = TRUE){
    $tag = '#0000ff';
    $att = '#ff0000';
    $val = '#8000ff';
    $com = '#34803a';
    $find = array(
        '~(\s[a-z].*?=)~',                    // Highlight the attributes
        '~(<\!--.*?-->)~s',            // Hightlight comments
        '~("[a-zA-Z0-9\/].*?")~',    // Highlight the values
        '~(<[a-z].*?>)~',                // Highlight the beginning of the opening tag
        '~(</[a-z].*?>)~',            // Highlight the closing tag
        '~(&.*?;)~',                    // Stylize HTML entities
    );
    $replace = array(
        '<span style="color: '.$att.';">$1</span>',
        '<span style="color: '.$com.';">$1</span>',
        '<span style="color: '.$val.';">$1</span>',
        '<span style="color: '.$tag.';">$1</span>',
        '<span style="color: '.$tag.';">$1</span>',
        '<span style="font-style: italic;">$1</span>',
    );
    if($decode)
        $string = htmlentities($string);
    return '
'.preg_replace($find, $replace, $string).'
';
}

Và bây giờ, mỗi khi các bạn cần Highlight đoạn code html nào, thì chỉ cần sử dụng như sau :

echo highlight_html('
<!-- This is an HTML comment -->
<a style="color: blue;" href="home.html">Home</a>

Go & here.

<!-- This is an HTML comment -->
<form action="/login.php" method="post"><input type="text" value="User Name" /></form>

');

Mình mong rằng , với chia sẻ trong bài viết này, các bạn sẽ có thêm kinh nghiệm trong việc lập trình PHP cũng như hiểu rõ hơn về cách làm Hightlight những đoạn code chia sẻ trong blog hay website của mình.

Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !