We are updating, some features may not work !
Please leave a feedback if you face any problem.

Highlight Code from the content



578 Views | Rishi Kashyap | 1 FOLLOW
    X

    Highlight Code from the content


    0

    I saw highlighted code from the content in various blogs. Some highlighted Code even had line numbers and I did some Googling to come to know about Syntax Highlighter. I tried my hands over GeSHI - PHP syntax highlighter but the problem was
    a) It was giving much more than I wanted (I want Simple things)
    b) It required Codes to be told separately from the content.

    Correct me if I am wrong, but I think the Syntax highlighter wants the code to be separated and fed to it so that it can highlight the code. This actually means extra burden for Users to post code separately and the content separately. I kept aside GeSHI and tried following KISS (Keep it simple silly) to simply highlight the code from the content.

    What I wanted to do was, you can post the code with the content part. You add the code tag to separate the codes and at the back-end we know to highlight that part only. Simple.

    I am showing simple front end e.g. the form part which you can generate using any form generator. Also in the back-end I am not showing the complete securing process to cover security loopholes. It is beyond my scope to detail securing your scripts, I admit I am incompetent for that ;-( .

    The front end or the form can be generated by the following html code (please modify as per your need).
    <html>
    <head></head>
    <body>
    <form EncType="multipart/form-data" Method="POST" Action="highlight_code.php" Name="code_highlight">
    <b>Detail :</b><br/>
    <textarea wrap="virtual" tabindex="1" cols="60" rows="10" name="comment"></textarea><br/>
    <input tabindex="2" value="SUBMIT" type="submit"/>
    </form>
    </body>
    </html>

    The above code simply creates a text box to write the content. If anyone wants to add some code in the posted content ,then it is enclosed in the "code" tag. On submission the content is sent to "highlight_code.php" which does the highlighting. I am using PHP Server Language but the same concept could be applied to any server side language.

    Below is the highlight_code.php . Please do not use the PHP script as is, as it is not secured !
    <?php
    //Get the POSTED Comment as a variable
    //htmlspecialchars() is PHP function to make the script little secured by replacing certain HTML Tags (< to &lt; and > to &gt;)
    //trim is a PHP function to remove any extra white space
    $code_to_highlight=htmlspecialchars(trim($_POST['comment']));
    //Now if their is &lt;code&gt; then replace the same with div with class
    $code_to_highlight1=str_replace( "&lt;code&gt;", "<div class=code>", $code_to_highlight);
    //Finally replace the &lt;/code&gt; tag with closing </div>
    $code_highlighted=str_replace( "&lt;/code&gt;", "</div>",$code_to_highlight1);
    //Now print the highlighted content
    echo "$code_highlighted" ;
    ?>


    The CSS for highlighting the Code is given below. You can modify as per your need.
    .code{
    border:2px solid #d2d2d2;
    background:#F0F0F0;
    padding:5px;
    margin:5px;
    clear:both;}


    You can find the codes in action (demo) at https://www.jahajee.com/e/highlight_code/

    Rishi Kashyap | | EDIT | REPLY


    tags  PHP TUTORIAL WEBSITE BASICS