snip2me - user reference

Why should I use it

Usually there is a numerous count of ways, where you may use your code converted into image. The only few variants are:

• Books production
• Blogs (if you don't want to use heavy syntax-highlighters)
• Forums and social services, where code hightlightning is prohibited, but images uploading allowed

How it works

Whole compilation is made inside your browser! And this is not a joke.

There are only 2 steps on image creation: syntax parsing and image rendering.

During parsing step, whole text is divided into tokens of different types.

On the rendering step tokens are painted onto canvas. Code painer could be wrapped into different other painters like:

• Custom border with rectangle or rounded borders
• Lines number column (not implemented yet)
• Custom watermark (not implemented yet)
• Color filter (not implemented yet)

Features

• Pure javascript. No 3rd-party libraries are used
• Ultra-fast one-round parsing algorithm
• Inheritance algorithm for canvas painting
• Safe, client-side code painting
• Source-code is written on coffeescript with client-side and server-side compatibility
• In embedded mode automatically scans page for code blocks and replaces them into images

Requirements

The only requirement is HTML5 compatible browser with canvas and canvas-text support on client side.

How to embed

Use the latest stable release bundle and annotate your code block with data-snip-* attributes.

<script src="https://github.com/ioleksiy/snip2me/releases/download/v0.2.0/s2m.min.js"></script>

<pre
  data-snip-lang="ruby"
  data-snip-scheme="vs2010"
  data-snip-painter-1="border => radius:5,width:1"
  data-snip-conf-min-width="640"
>
def hello(name)
  puts "Hello, #{name}!"
end
</pre>
			

On page load, snip2me automatically compiles matching <pre> blocks into rendered images.

Contribute

Fork on GitHub and make a pull request after suggestions.