4

I'm looking for a way to display code in my (custom, proprietary) blog in a nice way. So I need some kind of syntax highlighter. BUT WAIT. I'm actually planning on posting several equivalent code snippets in different languages, and ideally I'd like for it to have tabs that someone can quickly flip through to see the different versions. For example, one tab for Java, another tab for PHP, and so on.

I recognize that I could find a syntax highlighting library I like and then wrap it in my own code to switch the tabs, but I'm hoping there's already a library that has this feature out of the box.

Any suggestions?

1

The python library pygments can syntax highlight over 300 languages, (you can define more), and output to a number of formats among them HTML, RTF, LaTeX and ANSI sequences or you can define custom formatters.

It comes with a command line interface pygmentize but there is also a jython port jygments that you could use.

There is also Pygmentize (Bundled) which provides a JavaScript interface to pygments.

Re Tabs:

Since your code samples will be in different languages, hence have different content, in each tab the syntax highlighting does not need to be tab aware you can simply syntax highlight your code samples for each tab and serve them as static web elements.

  • 3
    What about the tabs requirement? As the question is explicitly for JavaScript, maybe you could elaborate a little more on that part? AFAIK Pygments is Python, Jython is Java, and Jygments is, hm, again Java. So where's the JavaScript requirement met? – Izzy Dec 19 '14 at 14:01
1

highlight.js and JQueryUI like in this example?

<!doctype html>
<html lang="en">
<head>
    <title>Syntax-highlighting and tabs</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

</head>
<body>

<script>
    $(document).ready(function()
    {
        $('#tabs').tabs();

        // We've put our tabs at the bottom - which does require some annoying cleanup
        $('#tabs li').removeClass('ui-corner-top').addClass('ui-corner-bottom').css('top', '-7px').css('border-top', 'none');
        $('#tabs div').css('height', '250px');

        hljs.initHighlightingOnLoad();
    });
</script>

<div id="tabs" style="width:600px">
  <div id="tabCpp">
    <pre><code class='c++'>

#include &lt;iostream&gt;

int main()
{
    std::cout << "Hello World!";
}

    </code></pre>
  </div>
  <div id="tabJava">
    <pre><code class='java'>

public class HelloWorld {

    public static void main(String[] args) {
        // Prints "Hello, World" to the terminal window.
        System.out.println("Hello, World");
    }

}

    </code></pre>
  </div>
  <div id="tabPhp">
    <pre><code class='php'>

&lt;?php
    echo("Hello World!");
?&gt;

    </code></pre>
  </div>
  <ul>
    <li><a href="#tabCpp">C++</a></li>
    <li><a href="#tabJava">Java</a></li>
    <li><a href="#tabPhp">PHP</a></li>
  </ul>
</div>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.