Showing posts from August, 2014

How to create syntax highlighter using jQuery

Today I am going to show you how to create a basic code highlighter for website. This UI is actually inspired by . I have added functionality of showing line numbers. Following things will be covered How to add line numbers How 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 Demo       Download 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

KineticJS – draw lines using mouse tutorial

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 canvas on mousedown store x1, y1 relative to canvas element set started = true on 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({