Pure JavaScript Python-Highlighter

Unsatisfied by the quality of the pure JavaScript python highlighters I decided to create one. The code is pretty simple and easy to customize. Enjoy it!

How to use it?

  1. Customize the CSS:

     .CHpython {background: #d9d9d9}
     .CHnumb {color: #9C0000}
     .CHwords{color: #008504}
     .CHchars {color: #9B26A4}
     .CHcwords {color: #6D0D61}
     .CHmwords {color: #0016A8}
     .CHdcomment {color: #686565}
     .CHlcomment1 {color: #7F7A7A}
     .CHscomment1 {color: #844D01}
     .CHscomment2 {color: #D0C018}
  2. Create a <pre> tag with the python code inside:

    <pre class="CHpython"><code> your code.. </code></pre>

  3. Import python-highlighter.js at the end of the HTML:

    <script src="/static/js/python-highlighter.js"></script>

  4. The python code will be highlighted!

    # -*- coding: utf-8 -*-
    from amazing.js import *
    from foo import faa
    class Test:
        def __init__(self):
                Dumb example / #highlight tester
            if True and 5 >= 1:
                print("this is a 'test'" # comment)
                print ( 'this is also a "test"' )
                # ''' this is also a test!! 
            os.system('''echo "{0}"'''.format('hello!'))
    if __name__ == '__main__':
  5. Remarks:

    • The highlighter works in single line/words codes, ex: from amazing.js import *

    • When inserting code it should be valid HTML. The highlighter will work if the HTML is not escaped, but the HTML of the website may fail. At least escape basic characters like ">" or "<".



  • The current version of the highlighter is 2016.06.01.
  • Published on Mars 20, 2015.
  • Last modified on June 6, 2016.

Send a feedback