Syntax Highlighter Default Theme Examples:

If you want to add html code to html, you can do so using the pre tag. You can color the html code using the SyntaxHighlighter library. SyntaxHighlighter has many language colors in this library like PHP, Javascript, CSS.

Find the scripts and styles and add the following:

    <script src="js/shCore.js"></script>
    <script src="js/shBrushJScript.js"></script>
    <script src="js/shBrushXml.js"></script>
    <script src="js/shBrushCss.js"></script>
    <script src="js/shBrushPhp.js"></script>
    <link href="css/shCore.css" rel="stylesheet" type="text/css">
    <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css">

Download script and style files:


Class for Following Languages:

Lang. Class
HTML brush: xml
XML brush: xml
JavaScript brush: js
CSS brush: css
PHP brush: php; html-script: true
Markdown brush: xml
CoffeeScript brush: js
Handlebars brush: xml
Jade brush: xml
LESS brush: css
Sass brush: css
Stylus brush: css

Syntax:

    <pre class="brush: language-code">
    
        &lt;!-- Enter your code here  --&gt;
        
    </pre>

Apply Syntax Highlighter Script:

    <script>SyntaxHighlighter.all()</script>

HTML code Snippet
Syntax:
<pre class="brush: xml"> 
    &lt;html&gt;
        &lt;head&gt;
            &lt;h1&gt;SYNTAX HIGHLIGHTER HTML EXAMPLE&lt;/h1&gt;
        &lt;/head&gt;
        &lt;body class="style"&gt;
            &lt;p&gt;Sample Text&lt;/p&gt;
        &lt;/body&gt;
    &lt;/html&gt;
</pre>
Output:
<html>
    <head>
        <h1>SYNTAX HIGHLIGHTER HTML EXAMPLE</h1>
    </head>
    <body class="style">
        <p>Sample Text</p>
    </body>
</html>

JavaScript code Snippet
Syntax:
    <pre class="brush: js">
    var flag = true;
        
    function easyconvert(temp) {
        console.log( "converter", temp);
        temp = flag ? true : false;
        return temp;
    }
    </pre>
Output:
var flag = true;
    
function easyconvert(temp) {
    console.log( "converter", temp);
    temp = flag ? true : false;
    return temp;
}

CSS code Snippet
Syntax:
<pre class="brush: css">
    body {
        background: #ecf0f1;
    }
    h1 {
        background: white;
        color: black;
        font-size: 28px;
    }
    h2 {
        font-size: 24px;
    }
</pre>
Output:
body {
    background: #ecf0f1;
}
h1 {
    background: white;
    color: black;
    font-size: 28px;
}
h2 {
    font-size: 24px;
}

PHP code Snippet
Syntax:
<pre class="brush: php; html-script: true">
    &lt;?php
        $sql = "SELECT * FROM TABLE";
        $result = $connection->query($sql);
        if ($result->num_rows > 0) {
            echo "&lt;h1&gt;Data Available&lt;h1&gt;";
        }
    ?&gt;
</pre>
Output:
<?php
    $sql = "SELECT * FROM TABLE";
    $result = $connection->query($sql);
    if ($result->num_rows > 0) {
        echo "<h1>Data Available<h1>";
    }
?>