4 ms·
Add Syntax Highlighting To Your Blog With VIM
- kmfrk 15y agoRelated 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).
- tambourine_man 15y agoas 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.
- oacgnol 15y agoI just tried this out and it works perfectly. A worthwhile note is that it also outputs line numbers if you enable them in Vim.
- tikhonj 15y agoThis 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 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.
- freestyler 15y agoM-x htmlize-buffer
- tikhonj 15y agoHmm, 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.
- freestyler 15y agoIt's from an external package called htmlize http://www.emacswiki.org/emacs/Htmlize http://www.emacswiki.org/emacs/Htmlize
- daflip 15y agoVIM 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
- ComputerGuru 15y agoProbably a little too off-topic, but after years of using similar "custom" methods of doing syntax highlighting, trying several WordPress plugins to automatically highlight, and several other options, I have found embedding GitHub Gists in blog posts to be the most reliable and lowest maintenance approach. 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.
- perlgeek 15y agoThe 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.
- deleted 15y ago[deleted]
- olalonde 15y agoI guess he estimates that is is more likely for him to loose the original than for gist to shutdown.
- jlarocco 15y agoI 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/ http://jlarocco.com/2011/12/22/static-gist-creator/ And just the code is here: https://gist.github.com/1513192 https://gist.github.com/1513192
- 15y ago
- perlgeek 15y agoFWIW 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.
- njharman 15y agoThis 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).
- johncoltrane 15y agoI've used `:TOhtml` for the first time last week for an internal presentation. It's quick and easy to modify.
- michaelfairley 15y agoPygments (http://pygments.org/ http://pygments.org/) will also turn code into syntax highlighted HTML.
- drtse4 15y agoAnd 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-css/ http://www.uraimo.com/2011/09/21/from-vim-theme-to-pygments-...
- davidcuddeback 15y agoThanks. Pygments looks better than other solutions I've looked at. I just found a Ruby wrapper for Pygments: https://github.com/tmm1/pygments.rb https://github.com/tmm1/pygments.rb
- espeed 15y agoI'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/directives/pygments_code_block_directive.py 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() ReStructuredText also allows you to easily add CSS classes to the markup without dropping down into the raw HTML. The rst container directive (http://docutils.sourceforge.net/docs/ref/rst/directives.html#container http://docutils.sourceforge.net/docs/ref/rst/directives.html...) enables you to add divs so you can allow the content to drive the page layout instead of always being boxed in by the same default template. See Jason Santa Maria's 12 min talk on this design concept http://vimeo.com/4394152 http://vimeo.com/4394152.
- zxy 15y agoIt seems the output uses the <font> element. That element has been deprecated since HTML4(https://developer.mozilla.org/en/HTML/Element/font https://developer.mozilla.org/en/HTML/Element/font).
- versiondiff 15y agoI 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.
- yaix 15y agoI hoped for a command line option. Isn't there some plugin for sed maybe? Like sed something <code.py >code.html
- rpearl 15y agovim -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/Text/VimColor.pm http://search.cpan.org/~rwstauner/Text-VimColor-0.14/lib/Tex...
- throwaway7834 15y agoDoesn't basically every text editor support something like this? E.g. Notepad++ has NppExport->Export to HTML (Example output: https://gist.github.com/2056841 https://gist.github.com/2056841)
- Kenan 15y agoIt surprisingly does a good job of mimicking the editor theme: http://jsfiddle.net/9f5PQ/ http://jsfiddle.net/9f5PQ/ Although it creates some blank CSS.
- mackyinc 15y agoI'm using pygments, I will give this one a try.
- drivebyacct2 15y agoUnfortunately, 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.
- deanproxy 15y agoI 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.
- bphogan 15y agoThe 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.
- drivebyacct2 15y agoThe 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
- matthiasb 15y agoThe best syntax highlighter I found is SyntaxHighlighter from Alex Gorbatchev. http://alexgorbatchev.com/SyntaxHighlighter/ http://alexgorbatchev.com/SyntaxHighlighter/ The JS is hosted on AWS.
- sharth 15y agoYou can generally edit the output with the following options: let html_use_css = 1 let use_xhtml = 1
- dfc 15y agoInsert 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-blocks http://johnmacfarlane.net/pandoc/README.html#verbatim-code-b...