Add Syntax Highlighting To Your Blog With VIM • Hacker News Board

Re: Add Syntax Highlighting To Your Blog With VIM

#11

Post by freestyler » Sat, Mar 17, 2012, 8:00 AM UTC

tikhonj wrote: post #3

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 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 u…

M-x htmlize-buffer

Re: Add Syntax Highlighting To Your Blog With VIM

#12

Post by espeed » Sat, Mar 17, 2012, 8:14 AM UTC

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:

  .. 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...) 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.

Re: Add Syntax Highlighting To Your Blog With VIM

#13

Post by zxy » Sat, Mar 17, 2012, 8:18 AM UTC

It seems the output uses the element. That element has been deprecated since HTML4(https://developer.mozilla.org/en/HTML/Element/font).

Re: Add Syntax Highlighting To Your Blog With VIM

#14

Post by tikhonj » Sat, Mar 17, 2012, 8:30 AM UTC

freestyler wrote: post #11

tikhonj wrote: post #3

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 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 u…

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.

Re: Add Syntax Highlighting To Your Blog With VIM

#15

Post by yaix » Sat, Mar 17, 2012, 8:33 AM UTC

I hoped for a command line option. Isn't there some plugin for sed maybe? Like sed something code.html

Re: Add Syntax Highlighting To Your Blog With VIM

#16

Post by throwaway7834 » Sat, Mar 17, 2012, 9:00 AM UTC

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)

Re: Add Syntax Highlighting To Your Blog With VIM

#17

Post by versiondiff » Sat, Mar 17, 2012, 9:03 AM UTC

zxy wrote: post #13

It seems the output uses the 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.

Re: Add Syntax Highlighting To Your Blog With VIM

#18

Post by drtse4 » Sat, Mar 17, 2012, 9:43 AM UTC

michaelfairley wrote: post #10

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-...

Re: Add Syntax Highlighting To Your Blog With VIM

#19

Post by aidos » Sat, Mar 17, 2012, 9:46 AM UTC

ComputerGuru wrote: post #4

Probably 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 an…

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.

Re: Add Syntax Highlighting To Your Blog With VIM

#20

Post by apl » Sat, Mar 17, 2012, 9:59 AM UTC

aidos wrote: post #19

ComputerGuru wrote: post #4

Probably 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 an…

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.

  > (...) and there's no way to scroll to the right

Just swipe using two fingers, and everything works as intended.