AutoSnippet – automatically generate HTML and javascript code snippets


Code snippets posted online are a great source of knowledge and simple way to share experience and to reuse code. As developers we always look to see if there is a ‘code example’ which we can modify to our needs. As bloggers we find code snippets very useful to get our information out to the readers.

The problem is that creating these code snippets is a complex and cumbersome task. You need you replace all the < with &alt, wrap the code in <pre> and <code> tags and then use a Syntax Highlighter to make our code look nice. Every time we change or fix the code you need to reiterate this process.

AutoSnippet solves this problem by automatically generating the code snippet from the source code (HTML, CSS and Javascript). No more cumbersome repetitive tasks and no more inconsistencies between example and real code.

In this article I will show how to generate automatic snippets for your blog and source/code websites.




 

Usage:

HTML and javascript goes here

1) Example of code and its automatic snippet(with Syntax Highlighter)

The following code snippet on the left is automatically generated with SyntaxHighlighter. As a developer you just write the code and the autoSnippet generates the snippet itself.

Just write

code and the snippet is automatically

generated on the right ->

Here is how it is done:

2) Example of code snippet only (with Syntax Highlighter)

The following code snippet automatically generated with SyntaxHighlighter.
To get the ‘snippet only’ affect you need to put the source div over the target div.
again, as a developer you just write the code and the autoSnippet generates the snippet itself.


Just write

code and the snippet is automatically

generated here!

Here is how it is done:

3) Simple Example – with no Syntax Highlighter:

AutoSnippet can integrate with other Syntax Highlighter. Here is AutoSnippet at its simplest form.

just code :)

Here is how it is done:

Auto snippet is easy to use- it is a jquery plug-in and uses SyntaxHighlighter for syntax highlighting. Both of SyntaxHighlighter and jquery are common and well established open source projects. AutoSnippet is easily extendable and is released under the MIT open source license.

download and docs

Formal documentation and download can be found here.

Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

Amir Shevat

Amir Shevat is the global Startup Outreach lead in Google Developer Relations (g.co/launch). Previously, Amir Led Google Campus Tel Aviv and was the co founder of several startups.

You may also like...

6 Responses

  1. anonymous says:

    Looks awesome! Thanks

    Also, isn’t a slight security risk that Drupal lets me use full html?

    Looks like javascript is working too, might wanna change that :)

    Anyway, thanks for the plugin. I’m sure it will come in handy.

  2. Amir Shevat says:

    Thanks!

    Not a major risk- I am still getting 5, 6 real comments a day (other than 12435 spam comments) so I filter them manually.
    Anyway, point taken.

    Cheers
    Amir Shevat

  1. January 13, 2011

    […] 1. Autosnippet […]

  2. August 13, 2011

    […] Site Demo Download Share and […]

  3. March 26, 2012

    […] AutoSnippet – Automatic Code Snippet Generator […]

  4. July 3, 2013

    […] AutoSnippet – Automatic Code Snippet Generator […]

Leave a Reply

Your email address will not be published. Required fields are marked *