Bootstrap Code Highlighter

SOW Highlighter is a tiny modest open-source library which improves readability of code snippets by highlighting any programming language, without addition of external js/css file!

  • Lightweight
  • 3.7Kb minified
  • 1.9Kb gzipped
  • Vanilla-js code! No jQuery or any dependency!
  • No external CSS
  • No javascript code initialization needed
  • 4 ways of using it: bootstrap, default, custom css & with an highlight.js CSS
  • License: MIT

(Initially written for Smarty Template)

The beauty: can also be used with any highlight.js css file! So if you like a particular highlight.js style, use it! Cool, isn't it?

How do I use it?

Just include the script and you are set! No initialization needed!

<script src="dist/sow-highlighter.min.js"></script>

Now select the way you want to use it!
See below the demos and copy/paste the HTML Markup.

1. Bootstrap 

<!-- 
  1. Bootstrap : White
-->
<div class="someclass">Hello World</div>
<span class="someclass">Hello World</span>
<i class="someclass">Hello World</i>
<strong class="someclass">Hello World</strong>
<b class="someclass">Hello World</b>
<section class="someclass">Hello World</section>
<script src="something.js"></script>
<input type="text" value="">
<textarea class="form-control"></textarea>

HTML Markup:

<pre class="rounded border p-4">
  <code class="sow-hl style-bootstrap d-block">
  // ... your code
  </code>
</pre>

<!-- 
  2. Bootstrap : Light
-->
<div class="someclass">Hello World</div>
<span class="someclass">Hello World</span>
<i class="someclass">Hello World</i>
<strong class="someclass">Hello World</strong>
<b class="someclass">Hello World</b>
<section class="someclass">Hello World</section>
<script src="something.js"></script>
<input type="text" value="">
<textarea class="form-control"></textarea>

HTML Markup:

<pre class="rounded bg-light rounded p-4">
  <code class="sow-hl style-bootstrap d-block">
  // ... your code
  </code>
</pre>

<!-- 
  2. Bootstrap : Dark
-->
<div class="someclass">Hello World</div>
<span class="someclass">Hello World</span>
<i class="someclass">Hello World</i>
<strong class="someclass">Hello World</strong>
<b class="someclass">Hello World</b>
<section class="someclass">Hello World</section>
<script src="something.js"></script>
<input type="text" value="">
<textarea class="form-control"></textarea>

HTML Markup:

<pre class="rounded bg-dark rounded p-4">
  <code class="sow-hl style-bootstrap d-block bg-dark">
  // ... your code
  </code>
</pre>

2. Default 

<!-- 
  1. Default : Light
-->
<div class="someclass">Hello World</div>
<span class="someclass">Hello World</span>
<i class="someclass">Hello World</i>
<strong class="someclass">Hello World</strong>
<b class="someclass">Hello World</b>
<section class="someclass">Hello World</section>
<script src="something.js"></script>
<input type="text" value="">
<textarea class="form-control"></textarea>

HTML Markup:

<pre>
  <code class="sow-hl style-default-light">
  // ... your code
  </code>
</pre>

<!-- 
  1. Default : Dark
-->
<div class="someclass">Hello World</div>
<span class="someclass">Hello World</span>
<i class="someclass">Hello World</i>
<strong class="someclass">Hello World</strong>
<b class="someclass">Hello World</b>
<section class="someclass">Hello World</section>
<script src="something.js"></script>
<input type="text" value="">
<textarea class="form-control"></textarea>

HTML Markup:

<pre>
  <code class="sow-hl style-default-dark">
  // ... your code
  </code>
</pre>

3. Using highlight.js CSS 

<!--
  CSS Used:
  <link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/atom-one-dark.css">
-->
<div class="someclass">Hello World</div>
<span class="someclass">Hello World</span>
<i class="someclass">Hello World</i>
<strong class="someclass">Hello World</strong>
<b class="someclass">Hello World</b>
<section class="someclass">Hello World</section>
<script src="something.js"></script>
<input type="text" value="">
<textarea class="form-control"></textarea>

HTML Markup:

<!-- Add to your head any highlight.js CSS -->
<link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/atom-one-dark.css">

<pre>
  <code class="sow-hl style-hljs hljs">
  // ... your code
  </code>
</pre>

4. Custom CSS 

<!-- HTML Markup -->
<pre>
  <code class="sow-hl sow-custom">
  // ... your code
  </code>
</pre>


/* 
CSS classes you need to style yourself:

  .sow-hl.sow-custom {
    display: block;
    overflow-x: auto;
    padding: 1.5em;
    color: #abb2bf;
    background: #3e444e;
  }

  .sow-custom .sow-comment {
    color: #758390;
  }

  .sow-custom .sow-keyword {
    color: #689fca;
  }

  .sow-custom .sow-string {
    color: #98c379;
  }

  .sow-custom .sow-number {
    color: #d19a66;
  }

*/

Languages Testing! 


<!-- 
  HTML 
-->
<div class="someclass">Hello World</div>
<span class="someclass">Hello World</span>
<i class="someclass">Hello World</i>
<strong class="someclass">Hello World</strong>
<b class="someclass">Hello World</b>
<section class="someclass">Hello World</section>
<script src="something.js"></script>
<input type="text" value="">
<textarea class="form-control"></textarea>




/***********************************
 ** Javascript
 **********************************/
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export  $initHighlight;




/***********************************
 ** Json
 **********************************/
[
  {
    "title": "apples",
    "count": [12000, 20000],
    "description": {"text": "...", "sensitive": false}
  }
]





-- SQL
CREATE TABLE "topic" (
    "id" serial NOT NULL PRIMARY KEY,
    "subject" varchar(255) NOT NULL
);





/***********************************
 ** CSS
 **********************************/
@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

.classname {
  color: #F0F0F0; 
  background: #600;
}






/***********************************
 ** Java
 **********************************/
/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}



/***********************************
 ** CPP
 **********************************/
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}





/***********************************
 ** Objectivec
 **********************************/
#import <UIKit/UIKit.h>
#import "Dependency.h"

@protocol WorldDataSource
@optional
- (NSString*)worldName;
@required
- (BOOL)allowsToLive;
@end

@property (nonatomic, readonly) NSString *title;
- (IBAction) show;
@end




/***********************************
 ** GO
 **********************************/
package main

import "fmt"

func main() {
    ch := make(chan float64)
    ch <- 1.0e10    // magic number
    x, ok := <- ch
    defer fmt.Println(`exitting now\`)
    go println(len("hello world!"))
    return
}





/***********************************
 ** Coffeescript
 **********************************/
grade = (student, period=(if b? then 7 else 6)) ->
  if student.excellentWork
    "A+"
  else if student.okayStuff
    if student.triedHard then "B" else "B-"
  else
    "C"

class Animal extends Being
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved #{meters}m."
Want to support me?

You might get something very useful & supporting me at the same time!

Smarty Template
© Dorin Grigoras
www.stepofweb.com