1. 程式人生 > >簡易的php程式碼線上編輯高亮

簡易的php程式碼線上編輯高亮

 

<style>
    body {
        background: #123;

        font-size: 16px;
        color: #9ad
    }

    div{
        line-height:1.4;
        font-family: Consolas
    }
</style>

<?php
function syntax_highlight($code)
{
    // this matches --> "foobar" <--
    $code = preg_replace(
        '/"(.*?)"/U',
        '"<span style="color: #007F00">$1</span>"', $code
    );
    // hightlight functions and other structures like --> function foobar() <---
    $code = preg_replace(
        '/(\s)\b(.*?)((\b|\s)\()/U',
        '$1<span style="color: #aa0">$2</span>$3',
        $code
    );
    // Match comments (like /* */):
    $code = preg_replace(
        '/(\/\/)(.+)\s/',
        '<span style="color: #777; "> $0 </span>',
        $code
    );
    $code = preg_replace(
        '/(\/\*.*?\*\/)/s',
        '<span style="color: #777;  "> $0 </span>',
        $code
    );
    // hightlight braces:
    $code = preg_replace('/(\(|\[|\{|\}|\]|\)|\->)/', '<strong>$1</strong>', $code);
    // hightlight variables $foobar
    $code = preg_replace(
        '/(\$[a-zA-Z0-9_]+)/', '<span style="color: #ff5500">$1</span>', $code
    );
    /* The \b in the pattern indicates a word boundary, so only the distinct
    ** word "web" is matched, and not a word partial like "webbing" or "cobweb"
    */
    // special words and functions
    $code = preg_replace(
        '/\b(print|echo|new|function)\b/',
        '<span style="color: #cde">$1</span>', $code
    );
    return $code;
}

/*example-start*/
/*
** Create some example PHP code:
*/

$example_php_code = '
// some code comment:
$example = "foobar";
print $_SERVER["REMOTE_ADDR"];
$array = array(1, 2, 3, 4, 5);
function example_function($str) {
 // reverse string
 echo strrev($obj);
}
echo date("Y-m-d");
print example_function("foo");
/*
** A multiple line comment
*/
print "Something: " . $example;';
// output the formatted code:

print '<pre><div contenteditable="true" style="border:none">';
print syntax_highlight($example_php_code);
print '</div></pre>';
/*example-end*/

 

效果: