Friday, May 27, 2011

Code snippets for blogging made easy

Note : In a later blog post, I have added two more functions to the blog-htmlize.el file using which line numbers to the code snippets can be added. Here are the details.

Today I started a blog, and here I am again, posting apparently on a "cooked up" topic. The story is like this - I was thinking about the topics to blog about and realized that my blog will eventually end up having some code snippets. But without syntax hi-lighting, half the beauty of the code is lost. Then I looked for numerous blogger code snippet tools, only to end up not being completely satisfied with any. I just love my color scheme in emacs, and want nothing less for my blog. The topic of the blog was thusly decided - "How to get your emacs color scheme to your blogger code snippets?" See that? That's why I call the topic to be "cooked up"!

So I decided to do something to get the code on blog look the same as that in my emacs. And as generally is the case with emacs, there was one lisp library (htmlize) which just did the same! (Refer to this to know the capabilities of emacs ). When I tried to use it, I realized that it makes a full fledged html file out of the code, that means the file has a doctype, html, head and body tags. But noting that a blog is also an html file and html files are not dreams (think Inception), I needed to strip the emacs-generated html file of its html, head, and body tags. But plainly doing this produced wrong output. So it was time to hack! I opened the htmlize.el file, modified the functions such that the resulting file does not have any of the tags mentioned earlier, and add an extra div tag. Then I accordingly modified the function which generated css so that the div is properly styled. Now in emacs, I can do M-x blog-htmlize-buffer and wow! I get a buffer in which the desired html code is sitting... waiting for me to copy-paste it to my blog. You can download the blog-htmlize.el  file (save the file as blog-htmlize.el) which I hacked out of the original htmlize.el. To use the blog-htmlize.el, add the following code to your .emacs file. (for directions, see the comments in the code)
;; Add site-lisp to load path. This is because I have kept
;; the blog-htmlize.el file in the site-lisp folder.
(add-to-list 'load-path "/home/sujeet/.emacs.d/site-lisp/") 

;; Make sure that the library is loaded when you start emacs.
(require 'blog-htmlize)

;; Add the following lines only if you want to use the
;; functions which save the htmlized buffer in a file
;; instead of showing it in another buffer.

(defun publish-buffer-to (file)
  "Converts buffer to html and writes it to file"
  (interactive "Ffile: ")
  (save-excursion
    (with-current-buffer (blog-htmlize-buffer (current-buffer))
      (write-file file)
      (kill-buffer (current-buffer))))
  (message (concat "current buffer contents published to " file)))

(defun publish-buffer ()
  "Converts buffer to html and writes it to ~/public_html/emacs.html"
  (interactive)
  (publish-buffer-to "~/public_html/emacs.html"))

The functions blog-htmlize-buffer and blog-htmlize-region open another buffer and show the output in it. If you want a function which saves the buffer after htmlizing in a file directly, you can add the additional lines showed in the code, and then use M-x publish-buffer or M-x publish-buffer-to according to your needs.

9 comments :

  1. Very cool...awesome...thanks !!

    Reply Delete
  2. Isn't there something which will create a vertical-scroll in the snippet so that the snippet as such takes less space in the blog.

    Reply Delete
  3. When you run the command M-x blog-htmlize-buffer, a new buffer will be opened in which you will find your code-to-be-pasted-into-blogger ready. The second line in it will be something like the following one

    <div class='body' style="overflow : auto; color: #f6f3e8; background-color: #242424;">

    in the style attribute add one more element called width
    and specify how many pixels tall you want your div to be say 500 pixels. Then change the above line to

    <div class='body' style="overflow : auto; color: #f6f3e8; background-color: #242424; width:500px;">

    Reply Delete
  4. Oohhh...
    I saw this just now. Thanks.

    Reply Delete
  5. correction : The last line of my previous comment should read
    <div class='body' style="overflow : auto; color: #f6f3e8; background-color: #242424; height:500px;">


    Also, as I have changed the naming scheme a bit when I added the line numbers, now, the class of the div is not "body", but "code-body"

    Reply Delete
  6. Thank you very much man.The post was very use ful.

    Reply Delete
  7. I'll have a test on it! thanks
    But meanwhile, I just use the online version here http://codeformatter.blogspot.com/2009/06/about-code-formatter.html

    thanks for this emacs package!

    Reply Delete

Post a Comment