How to Highlight Source Code in HTML

Color (syntax highlighting) within an HTML code tag

Stack Overflow uses Google's prettify JS library for doing syntax highlighting. It executes on the client side after the HTML has been delivered by the server. That's why you don't see it in the raw HTML source. If you have a browser plugin such as FireBug, you'll be able to inspect the DOM after prettify has done its magic.

Update 2020-09-14: Stack Overflow switched from Google's prettify to highlight.js.

How to highlight source code in HTML?

You can either do this server-side or client-side. It's not very processor intensive, but if you do it client side (using Javascript) there will be a noticeable lag. Most client side solutions revolve around Google Code's syntax highlighting engine. This seems to be the most popular one: SyntaxHighlighter

Server-side solutions tend to be more flexible, especially in the way of defining new languages and configuring how they are highlighted (e.g. colors used). I use GeSHi, which is a PHP solution with a moderately nice plugin for Wordpress. There are also a few libraries built for Java, and even some that are based upon VIM (usually requiring a Perl module to be installed from CPAN).

In short: you have quite a few options, what are your criteria? It's hard to make a solid recommendation without knowing your requirements.

HTML5 tag to display syntax highlighting

There's nothing like that in HTML5 I am afraid, but you can always use highlight_string() from PHP. If you want something purely on the client side, try a JS highlighter like prettify, which is what StackOverflow uses for their code highlighting:

http://code.google.com/p/google-code-prettify/

Here are some other ones:

• SyntaxHighlighter
• SHJS (uses GNU Source-highlight definitions)

How do you display your php source code with highlight or view source?

PHP has two native functions that might be of interest: highlight_file() and highlight_string(). If neither of those are ideal, you could also use Google Code Prettify to achieve this result. This is the solution many use, including StackOverflow itself.

Alternatives:

• SyntaxHighlighter
• SHJS
• jQuery Chili
• Lighter for MooTools
• GeSHi

How to hightlight source code using codemirror on a html page

as it shown in codemirror.net

create an <textarea> element, which will replace yuor current <pre> tag. set textarea to readonly if you prefer no edit.

<textarea id="myTextarea" readonly>
... your code for highlighting goes here ...
</textarea>

<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
  var editor = CodeMirror.fromTextArea(document.getElementById("myTextarea"), {
    lineNumbers: true
  });
</script>

multiple instances selected by a common class name:

var areas = document.getElementsByClassName("myTextareaClass");
for(var i = 0; i < areas.length; i++) {   
  CodeMirror.fromTextArea(areas.item(i), {lineNumbers: true});
}

How can I show syntax-highlighted Python code in a HTML-page?

If you wish to only display code, python in this case, consider using Github gist.

You can then embed it using the 'embed' option on the top right corner. It will give you a script tag that you can copy and add to your webpage like so:

<script src="https://gist.github.com/username/a39a422ebdff6e732753b90573100b16.js"></script>

How to use webworkers to highlight source code blocks using highlightjs?

Example using one webworker

To use only one webworker to highlight multiple code-blocks you might use the following code, where highlight_code_worker_function is the worker function.

<script>

    function highlight_code() {
        if (typeof (Worker) === undefined) return false;
        var workerFunction = new Blob(['(' + highlight_code_worker_function.toString() + ')()'], {type: "text/javascript"});
        var worker = new Worker(URL.createObjectURL(workerFunction));
        var codeBlocks = $('div.readme pre, div.readme code');
        worker.onmessage = function(event) {
            var data = JSON.parse(event.data);
            codeBlocks.eq(data.index).html(data.result).addClass('hljs');
        };
        worker.onerror = function() {
            // do nothing
        };
        codeBlocks.each(function(index) {
            worker.postMessage(JSON.stringify({index: index, code: $(this).text()}));
        });
        worker.postMessage(JSON.stringify({index: -1}));
    }

    function highlight_code_worker_function() {
        onmessage = function(event) {
            var data = JSON.parse(event.data);
            if (data.index === -1) {
                close(); // close worker
            }
            importScripts(''https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js'');
            self.hljs.configure({tabReplace:4});
            var result = self.hljs.highlightAuto(data.code);
            postMessage(JSON.stringify({result: result.value, index: data.index}));
        }
    }

    highlight_code();

    </script>

Example using multiple-web workers

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/monokai_sublime.min.css">

    <script type="text/javascript">

      function highlight_code()
      {
        if (typeof (Worker) === undefined) return false;
        var workerFunction = new Blob(['(' + highlight_code_worker_function.toString() + ')()'], {type: "text/javascript"});
        var localWorkerURL = URL.createObjectURL(workerFunction);
        $('div.readme pre, div.readme code').each(function() {
          var code = $(this);
          var worker = new Worker(localWorkerURL);
          worker.onmessage = function(event) { code.html(event.data).addClass('hljs'); }
          worker.postMessage(code.text()); // start worker
        });
      }

      function highlight_code_worker_function()
      {
        onmessage = function(event) {
          importScripts('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js');
          self.hljs.configure({tabReplace:4});
          var result = self.hljs.highlightAuto(event.data);
          postMessage(result.value);
          close(); // close worker
        }
      }

      $(window).on('load', highlight_code);

    </script>

---

Related Topics