Add Syntax Highlighting To Your Blog With VIM(alexanderle.com)
alexanderle.com
Add Syntax Highlighting To Your Blog With VIM
http://alexanderle.com/blog/2012/03/17/syntax-highlighting-with-gvim.html
17 comments
The key is to store the original, and to display the tohtml output.
I'm kinda skeptical about embedding stuff from external sites; the more external dependencies you have, the less reliable your own blog becomes.
I'm kinda skeptical about embedding stuff from external sites; the more external dependencies you have, the less reliable your own blog becomes.
I guess he estimates that is is more likely for him to loose the original than for gist to shutdown.
I had the same complaint and wrote a script to create static HTML from GitHub's Gists. I added the gist CSS rules to the rules for the WordPress theme I'm using, and now I can copy/paste the generated HTML into blog posts without fetching from GitHub.
It requires Python3 and PyQt (to execute Javascript), so it's pretty heavy weight, but I have them installed anyway, so it's worked well for me.
A brief explanation and the code is here: http://jlarocco.com/2011/12/22/static-gist-creator/
And just the code is here: https://gist.github.com/1513192
It requires Python3 and PyQt (to execute Javascript), so it's pretty heavy weight, but I have them installed anyway, so it's worked well for me.
A brief explanation and the code is here: http://jlarocco.com/2011/12/22/static-gist-creator/
And just the code is here: https://gist.github.com/1513192
[deleted]
Unfortunately Gists aren't very viewable on a mobile (certainly on an iPhone) as they're truncated and there's no way to scroll to the right. A number of times I've been disappointed to find articles (The Zen of R that's on the front page at the moment, for example) that I can't read. There's a button to view in raw but it's a bit of a shame that I can't view the content with highlighting and proper (non)wrapping.
Gists also don't show up in some (most?) RSS readers.
I'm partial to ReStructuredText (rst) as the markup language for blog entries instead of markdown because you can extend rst with custom directives.
In Lightbulb, I used the rst Pygments CodeBlock directive by Georg Brandl (https://github.com/espeed/lightbulb/blob/master/lightbulb/di...) to incorporate code blocks like in Sphinx:
See Jason Santa Maria's 12 min talk on this design concept http://vimeo.com/4394152.
In Lightbulb, I used the rst Pygments CodeBlock directive by Georg Brandl (https://github.com/espeed/lightbulb/blob/master/lightbulb/di...) to incorporate code blocks like in Sphinx:
.. code: python
>>> from bulbs.neo4jserver import Graph
>>> g = Graph()
See Jason Santa Maria's 12 min talk on this design concept http://vimeo.com/4394152.
This is an awesome feature. Naturally, Emacs also supports this, right out of the box. Just use M-x htmlfontify-buffer.
Here's a sample of the output: http://inst.eecs.berkeley.edu/~tikhon/Interpreter.hs.html
EDIT: Also, note that while the VIM one uses a bunch of <font color="..."> tags, the Emacs one uses a bunch of span tags with reasonable class names like "function-name" or "string", so it produces much nicer code and is easy to use with your own CSS.
Here's a sample of the output: http://inst.eecs.berkeley.edu/~tikhon/Interpreter.hs.html
EDIT: Also, note that while the VIM one uses a bunch of <font color="..."> tags, the Emacs one uses a bunch of span tags with reasonable class names like "function-name" or "string", so it produces much nicer code and is easy to use with your own CSS.
VIM too can be told use span tags and css rather than lots of messy font tags, relevant .vimrc goodness:
let html_use_css=1
let use_xhtml = 1
let html_use_css=1
let use_xhtml = 1
M-x htmlize-buffer
Hmm, on mine (GNU Emacs 23.3.1 on Fedora) it's M-x htmlfontify-buffer. It came with the Emacs distribution as standard. I suspect htmlize-buffer is either from some external package or from a different version of Emacs.
It's from an external package called htmlize http://www.emacswiki.org/emacs/Htmlize
Pygments (http://pygments.org/) will also turn code into syntax highlighted HTML.
And then, if you need it, you can turn your vim theme in a pygments-compatible css: http://www.uraimo.com/2011/09/21/from-vim-theme-to-pygments-...
Thanks. Pygments looks better than other solutions I've looked at. I just found a Ruby wrapper for Pygments: https://github.com/tmm1/pygments.rb
I just tried this out and it works perfectly. A worthwhile note is that it also outputs line numbers if you enable them in Vim.
It seems the output uses the <font> element. That element has been deprecated since HTML4(https://developer.mozilla.org/en/HTML/Element/font).
I think that depends on what version of Vim you are using. I have Vim 7.3 and it is creating a CSS class for each token type.
Doesn't basically every text editor support something like this? E.g. Notepad++ has NppExport->Export to HTML (Example output: https://gist.github.com/2056841)
It surprisingly does a good job of mimicking the editor theme: http://jsfiddle.net/9f5PQ/
Although it creates some blank CSS.
Although it creates some blank CSS.
FWIW I'v been using Text::VimColor (Perl interface to vim's syntax hilighting) on my blog for several years now. Mostly because I talk a lot about Perl 6, and there aren't many hilighters for Perl 6 code around.
In the beginning it sometimes produced Mojibake, which I finally nailed on a missing locale. And it's a bit slower than the usual hilighter, because it spawns a new vim process for each snippet to be hilighted. Still a good choice.
In the beginning it sometimes produced Mojibake, which I finally nailed on a missing locale. And it's a bit slower than the usual hilighter, because it spawns a new vim process for each snippet to be hilighted. Still a good choice.
Related question: are all syntax highlighters awful to read for people who depend on accessibility tools, or is there actually a way to present code in a way that is accessible to these people?
Currenly, I just decorate the <pre> and <code> tags with CSS (as much as I would love line numbers).
Currenly, I just decorate the <pre> and <code> tags with CSS (as much as I would love line numbers).
as much as I would love line numbers
I don't know if I understood you correctly, but you could add line numbers with before pseudo elements and use JavaScript to add numbers to its content. No need to mess with the markup, just CSS and JavaScript.
I don't know if I understood you correctly, but you could add line numbers with before pseudo elements and use JavaScript to add numbers to its content. No need to mess with the markup, just CSS and JavaScript.
Insert plug for pandoc. Among the many benefits pandoc provides is easy code highlighting. By defualt it uses pygments as others have suggested.
http://johnmacfarlane.net/pandoc/README.html#verbatim-code-b...
http://johnmacfarlane.net/pandoc/README.html#verbatim-code-b...
The best syntax highlighter I found is SyntaxHighlighter from Alex Gorbatchev. http://alexgorbatchev.com/SyntaxHighlighter/
The JS is hosted on AWS.
I'm using pygments, I will give this one a try.
I hoped for a command line option. Isn't there some plugin for sed maybe? Like sed something <code.py >code.html
vim -f +'syn on' +'run! syntax/2html.vim' +'wq' +'q' [file]
produces file.html
Or, use perl's Text::VimColor http://search.cpan.org/~rwstauner/Text-VimColor-0.14/lib/Tex...
produces file.html
Or, use perl's Text::VimColor http://search.cpan.org/~rwstauner/Text-VimColor-0.14/lib/Tex...
You can generally edit the output with the following options:
let html_use_css = 1
let use_xhtml = 1I've used `:TOhtml` for the first time last week for an internal presentation. It's quick and easy to modify.
Unfortunately, with the advent of TextMate/Sublime Text 2, I'm always disappointed when returning to VIM's syntax highlighting. It leaves a lot to be desired.
I'd love a JavaScript plugin to parse TextMate theme files and highlight blocks of code.
I'd love a JavaScript plugin to parse TextMate theme files and highlight blocks of code.
I don't see why... I've been able to do almost any color scheme from textmate or other editors. I have my favorite color scheme from textmate in VIM (Sunburst). Just make sure you're either using gvim or your terminal has 256 colors turned on.
The 256 color thing is the most important and was something I struggled with for a few years before I figured out the problem - on Linux it was always fine, but on OSX, wow it was bad. Couldn't figure out why till someone else said the fact same thing - 256 color mode.
The syntax schemes just either never have the number of unique keyword(-types) available or I assume since it's the case for every language I use... it's not possible with vim. If it is, then I lament the inferior set of default syntax highliting.
And yeah, I use gvim for the greater color palette. I'd take a screenshot, but my current tether is on 3G and my server is taking too long to launch Gvim over X
And yeah, I use gvim for the greater color palette. I'd take a screenshot, but my current tether is on 3G and my server is taking too long to launch Gvim over X
This is not sophisticated, nor webscale, nor using the fad of the week. But, it is non-the-less awesome because it does exactly what OA needs, right now, using a context appropriate amount of effort (i.e. near to none).
This probably won't matter to most people, but if you're the kind of person that has tutorials or examples or any other kind of thing you try to keep up to date in a blog post over the years, things like TOhtml make it hard to quickly edit and maintain the code, while WordPress plugins invariably do a poor job, add too much to the processing time (though you should be using a caching solution), and break on upgrade. For me, GitHub's Gists were a godsend.