Automatic code markup

3 Views

Is there a tool (similar to the markup here on StackOverflow) that transforms code (based on syntax and keywords) into markup’ed code? In other words, take a blot of code and add the appropriate tags and styles to have it show all pretty in colour (and indented maybe)?

Specifically, I’d like something that’s language specific (or language aware) for at least C# and SQL. It can be a plugin to WordPress or just a formatter that I could post my code into and then copy paste to WordPress (or elsewhere. Portability is nice).

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. Vim is a remarkably good tool for this. You don’t have to use it as an editor (although every serous developer should consider doing just that–but I digress), you can use it as a pure syntax-aware code-to-html processor.

    For example take this Python3 script (syntax coloring is by StackOverflow in this listing):

    'Get geocode data from Google'

# See https://developers.google.com/maps/documentation/geocoding

import urllib, urllib2
import json

params = {'address': "1600 Amphitheatre Parkway, Mountain View, CA",
          'sensor': 'false'}

base_url = 'http://maps.googleapis.com/maps/api/geocode/json'
url = base_url + '?' + urllib.urlencode(params)

reply = json.loads(urllib2.urlopen(url).read() )
print json.dumps(reply, sort_keys=True, indent=4, separators=(',', ': '))

    Using Vim color scheme Light this method produces:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>~/Projects/google/geocoding.py.html</title>
<meta name="Generator" content="Vim/7.3">
<meta name="plugin-version" content="vim7.3_v10">
<meta name="syntax" content="python">
<meta name="settings" content="use_css,expand_tabs">
<style type="text/css">
<!--
pre { font-family: monospace; color: #000000; background-color: #c7c7c7; }
body { font-family: monospace; color: #000000; background-color: #c7c7c7; }
.Constant { color: #bd00bd; }
.Normal { color: #000000; background-color: #c7c7c7; }
.Statement { color: #191970; font-weight: bold; }
.Comment { color: #005500; }
.String { color: #8b4500; }
-->
</style>
</head>
<body>
<pre>
<span class="String">'Get geocode data from Google'</span>

<span class="Comment"># See <a href="https://developers.google.com/maps/documentation/geocoding">https://developers.google.com/maps/documentation/geocoding</a></span>

<span class="Statement">import</span> urllib, urllib2
<span class="Statement">import</span> json

params = {<span class="String">'address'</span>: <span class="String">&quot;1600 Amphitheatre Parkway, Mountain View, CA&quot;</span>,
          <span class="String">'sensor'</span>: <span class="String">'false'</span>}

base_url = <span class="String">'<a href="http://maps.googleapis.com/maps/api/geocode/json">http://maps.googleapis.com/maps/api/geocode/json</a>'</span>
url = base_url + <span class="String">'?'</span> + urllib<span class="Normal">.</span>urlencode(params)

reply = json<span class="Normal">.</span>loads(urllib2<span class="Normal">.</span>urlopen(url)<span class="Normal">.</span>read() )
print json<span class="Normal">.</span>dumps(reply, sort_keys=<span class="Statement">True</span>, indent=<span class="Constant">4</span>, separators=(<span class="String">','</span>, <span class="String">': '</span>))

</pre>
</body>
</html>

    Note that each syntax element is given a color in the CSS style section, which you can tweak in the html itself if you don’t want to fiddle with Vim color schemes.

    Here’s what you’ll see in your browser. I’ve clipped this as an image to avoid color changes from StackOverflow:

    HTML syntax highlighting

    Here’s how to do it:

    1. Install a Vim gui. The official Vim download page will get you started. If you can’t use a gui, hope is not lost, I’ll comment about that case below.
    2. Choose the syntax coloring you want. I use this page to choose and download color schemes. You put the color scheme files in your ~/.vim/colors directory, or for Windows in %USERPROPFILE%/vimfiles/colors.
    3. Start Vim.
    4. Load the source code for which you want syntax-colored markup. You do this with the command :e <file path> where <file path> is the location of the source file. Vim gui’s will also provide menu commands to open a file, you might prefer to do it that way so you can browse you file system.
    5. Load your color scheme. Type :color <name> where <name> is the color scheme you saved in step 2, without the .vim extension. For example, I use :color synic to load the color scheme in ~/.vim/colors/synic.vim. (In Vim, the ‘:’ puts you into “command mode”. When you enter a command and press <return> you are back in what is called “normal mode”.)
    6. Tell Vim to generate the html using the command :TOhtml. A new window will open up and you’ll see the html markup. Be sure to use the right capitalization when executing _Vim_commands.
    7. Your cursor should be in the new window with the markup. Save this using the gui’s file menu, or enter the command :w <file path>

    Optionally, if you want line numbers to display in the generated HTML, use the command :set number before :TOhtml.

    If you don’t see the syntax coloring show up after you set your color scheme, try the command :syntax on. If you’re doing syntax coloring for a language or text format that vim doesn’t recognize you can probably find syntax files for that language on the web. Details of how to install syntax files are beyond what I want to write about here, but your favorite search engine has plenty on the topic. Try a search such as vim <mylang> syntax. To see what language Vim thinks you have, use the command “:set ft?”.

    If, like me, you prefer to use the terminal form of Vim, there’s a little more to consider. You can not create colors that the terminal doesn’t support. Most terminal apps provide either 2, 16 or 256 colors. Get Vim to output in 256 colors (if it doesn’t already) using the instructions here. Not all color schemes work well on terminals out of the box, but instructions on this page help substantially, although they are written with a more experienced Vim user in mind. It’s a good idea to run the Vim tutorial (:help tutorial) if you have to do more than I outline in my steps above.