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!

    
    #!/usr/bin/python3
    # -*- 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!! 
    
            mylist=[]
            mylist=list()
            dictionary={}
            
            os.system('''echo "{0}"'''.format('hello!'))
            
    if __name__ == '__main__':
        foo()
    	    	
  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 "<".

    • If you want a concrete example you can download this HTML file.

Where to get it?

You can download the JS directly from the static content of this website.

Info

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

Send a feedback

captcha