Posts

Showing posts from August, 2014

How to create syntax highlighter using jQuery

Image
Today I am going to show you how to create a basic code highlighter for website. This UI is actually inspired by sixrevisions.com. I have added functionality of showing line numbers.
Following things will be covered
How to add line numbersHow to highlight single line comments i.e. those lines which starts with //How to highlight comment blocks i.e. those lines which are enclosed within /* */
Live DemoDownload Code

To use this code highlighter you have to wrap your code inside <pre> tags. Really there is nothing new in it. It is the same traditional old method. <code> tag is another way of adding code into your post. However there is a difference between <pre> and <code> tag. To give analogy of their working I would give example of <div> and <span> respectively. This means <pre> is a block tag and <code> tag can be used inline.
One important thing we need to consider is, in WordPress if you want to post HTML code then you have to es…

KineticJS – draw lines using mouse tutorial

Image
In this post we will see how to draw lines using mouse with KineticJS canvas library. First we will go through a basic logic for drawing line. Also we will see how this logic can be implemented for KineticJS.

live Demo | Download Code
Logic for drawing line on canvas using mouse
Listen for mousedown, mousemove, mouseup events on canvason mousedown
store x1, y1 relative to canvas element
set started = trueon mousemove
if started = false then exit
get current x, y
element = line(x1, y1, x, y)on mouseup
if started = false then exit
get current x, y
element = line(x1, y1, x, y) Explanation is as below
Add following div into body
<div id="canvasArea"> </div> Initialize a stage and layers
var stage = new Kinetic.Stage({ container: 'canvasArea', width: 500, height: 500, draggable: false }), layer = new Kinetic.Layer({ name: 'layer' }), tmpLayer = new Kinetic.Layer({ name: 'tmpLayer' }); In above co…