• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Code formatter
 

Code formatter

on

  • 772 views

Within days of starting my tech blog I, like many other IT bloggers before me (and there will be many after me) wanted to include some code snippets - laid out nicely, with line numbers and keyword ...

Within days of starting my tech blog I, like many other IT bloggers before me (and there will be many after me) wanted to include some code snippets - laid out nicely, with line numbers and keyword highlighting.

Although I found many tools online for this, they were either aimed at just one language or asked me to specify the language. So, lightbulb, why not assemble my own tool using a bit of jQuery, JavaScript and Regex that could be a little more intelligent than what already existed.

Statistics

Views

Total Views
772
Views on SlideShare
771
Embed Views
1

Actions

Likes
1
Downloads
2
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Code formatter Code formatter Presentation Transcript

    • <SLIDESHOW title=”My code formatter for blogs” alt=”Version 1” />
    • End goal Build an intuitive code formatter that can be grown by its users With some sample keywords from 5 languages, derive the language and apply styling 1st goal
    • Step 1: Break the problem down Photo by Douglas Woods http://www.flickr.com/photos/deerwooduk/1788483794/
      • Create an array of language keywords
      • Run a Regex match for each language and record the count
      • Sort the array in descending order on match count
      • Run a Regex replace, injecting formatting around identified keywords
      • Run a Regex replace, injecting line numbers to all lines
      Breaking it down
    • Step 2: One brick at a time Photo by Douglas Woods http://www.flickr.com/photos/deerwooduk/1788483794/ Photo by Takomabibelot http://www.flickr.com/photos/takomabibelot/2455018965/
    • Create an array of keywords var pArr = new Array(); pArr[0] = /((join |inner |outer |from |where |select |group |by |order )+)/ig pArr[1] = /((delegate |object |string |byte |list )+)/ig pArr[2] = /((div |style |br )+)/ig pArr[3] = /((match|regex)+)/ig pArr[4] = /((var )+)/ig
    • Run a Regex match for each language and record the count var mArr = new Array(); for(var i=0; i<pArr.length; i++) { var m = (strIn.match(pArr[i])||[]).length; mArr[i] = new Array(); mArr[i][0] = pArr[i]; mArr[i][1] = m; }
    • Sort the array in descending order on match count mArr.sort(function(a,b){ return a[1] <= b[1]; });
    • Run a Regex replace, injecting formatting around identified keywords strIn = strIn.replace(mArr[0][0], '<br/><span style=&quot;color: green;font-weight: bold;&quot;>$1</span>'); strIn = strIn.replace(/({)/ig, '$1<br/>&nbsp;'); strIn = strIn.replace(/((^<br/>)+)/,'');
    • Run a Regex replace, injecting line numbers to all lines var pLns = /(.*?)(<br/>|$)/ig var lArr = strIn.match(pLns); strIn = &quot;&quot;; for(var i=0; i<lArr.length; i++) { var ln = lArr[i]; if(ln.length > 0) { var col = ((i%2)==1)? &quot;fff&quot; : &quot;eee&quot;; strIn += &quot;<div style=&quot;background-color:#&quot;+ col +&quot;&quot;><div style=&quot;float:left;color:#666;&quot;>Line &quot;+(i+1)+&quot;:&nbsp;</div><div><code>&quot;+ln+&quot;</code></div></div>&quot;; } }
    • And that's version 1. So what next? > More keywords > More languages > More styling > More interaction > More contribution Wanna help? http://at-dpitt.blogspot.com/p/code-formatter-for-blogs.html