Easy Way To Embed Code Snippet To Blogger

You can manually embed your code snippet to your Blogger, but this is pretty tedious and annoying. I would like to share several easier ways by using existing online tools.

  • Syntax Highlighter
    URL: http://alexgorbatchev.com/SyntaxHighlighter
    Advantage: Once CSS and JS are updated to your Blogger, you don't need to concern about any dependencies.
    Disadvantage: It is a little hard to apply them.
  • Color Scripper
    URL: https://colorscripter.com
    Advantage: Easy to use. Plug-ins and theme can be applied.
    Disadvantage: Water-mark will be on bottom right corner.
  • Github Gist
    URL: https://gist.github.com
    Advantage: Easy to use. You can maintain the change history.
    Disadvantage: Log-in required. You need to finish first before applying to your Blogger.
I personally prefer the last option, Github Gist because it is the easiest way for me to use and love to maintain the change history as I might need to update them in the future.

You can follow these steps.

  1. Go to the Github Gist: https://gist.github.com
  2. Log in to your Github. (Sign up if you don't have yet.)
  3. Click the + button on top left on the page.
  4. Type in your code snippet in the editor, then click the "Create gist" button. You can click either secret or public. It is up to you.
    (Note that the file extension is important for the syntax highlight.)
  5. Copy the link in the Embedded.
  6. Paste it into your Blogger post.
    Note that you should use "HTML" not "Compose".
    Note that you should change the theme, if you don't see the code snippet as some themes can't handle the embedded code.

This is the example.

Comments

Popular Posts