How to highlight source code for displaying in HTML

A useful online app that allows you to easily create fully formatted HTML to display highlighed code.

I just want to share with you a useful web tool created by Alexander Kojevnikov (thank you) that allows you to quickly and conveniently convert your source code to highlighted HTML so that you can place it on your website or blog.


Lets say you have some Python code snippet:

def convert(x):
    return(x*2.54)
## list of values to convert
vals = [31,24,15,6.3]
for each in vals:
    print convert(each)
   

However, what you really want is HTML that displays your source code as it appears in your development environment or code editor (e.g. spyder, jupyter, pycharm, vim, etc.). For example with highlighted keywords like:


def convert(x):
    return(x*2.54)
## list of values to convert
vals = [31,24,15,6.3]
for each in vals:
    print convert(each) 

Try it

Just go the the web app at http://hilite.me/ and type your source code in the box on the left, select the language of the source code and the output style, then press "Highlight!". You will get output HTML for displaying your source code for many different languages. The screen shot below shows an example using the Python snippet above as it would be displayed in the vim text editor (my favorite) using vim's default color scheme. You also have the option to display line numbers in the HTML.  



 
 

Hilite.me is a useful web tool that you can easily use in a quick fashion to highlight and style source code of varying type to output in HTML, markdown, LaTeX, and others. With a bit of research you will find that everything done on the tool can easily be done on your system using the Pygments Python package. This may be worth learning if you commonly have workflows converting source code to readable HTML or produce documentation. Or if you do not have internet access. If there is interest in how to use Pygments in a workflow it will be a future post. 

Comments

Post a Comment

Popular posts from this blog