v5.x | Code Wells

Language Type

Add Code Here

Add Line Numbers

example

// This is a javascript comment
$(document).ready(function() {
   $('.navfeatures').addClass('active');
   $('.navcodewells').addClass('active');
});

<pre class='prettyprint'>
// This is a javascript comment
$(document).ready(function() {
   $('.navfeatures').addClass('active');
   $('.navcodewells').addClass('active');
});
</pre>

Custom CSS

Custom CSS is required if you wish to style the code well further. Note that alternating backgrounds are often fine on lighter backgrounds, but generally look poor on darker backgrounds. To add the copy button functionality as I've done here, you will need to add some javascript and employ the bootstrap icons.

/* Basic styling for prettyprint */
.prettyprint {
font-family: "Menlo", "Monaco", "Consolas", monospace !important;
background: #20364C;
background-color:
border-radius: 2px;
border: none !important;
padding: 20px !important;
font-size: 16px;
white-space: pre-wrap;
/* css-3 */
white-space: -moz-pre-wrap;
/* Mozilla, since 1999 */
white-space: -pre-wrap;
/* Opera 4-6 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* Internet Explorer 5.5+ */
}

/* Adds linenums to each line listed when .linenums class used */
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
list-style-type: decimal;
}

/* Adds individual lines to prettyprint */
ol.linenums {
counter-reset: linenumber;
}

/* Adds single increments and disables the background for alternating line numbers */
ol.linenums li {
list-style-type: none;
counter-increment: linenumber;
background: transparent !important;
}

ol.linenums li:before {
content: counter(linenumber);
float: left;
margin-left: -4em;
text-align: right;
width: 3em;
}

Including Google Prettify

To include Google's syntax highlighter for your Web page, follow the steps below. For more information on serving and customizing Prettify, see the Code-Prettify documentation.

1

Include a link to a CDN-hosted prettify.js file within the <head> element of your HTML file. You may also serve this same file locally.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
2

Add the prettyprint class to your <pre> element. Although in many cases, Prettify will auto-detect your language, we recommend specifying it explicitly.

<pre class='prettyprint lang-css'> ... </pre>
3

If your language is not supported natively — this is the case with CSS — you will need to include a link to the specific language file.

Download the appropriate language file from the following list and save it to an appopriate directory. In our example, we've placed it in the js/ directory.

Apollo, Basic , Clojure, CSS, Dart , Erlang, Go, Haskell, Lasso, Lisp/Scheme, LLVM , Logtalk, Lua, MATLAB , MLs: F#, Ocaml, SML, Mumps , Nemerle, Pascal, Protocol Buffers, R, S, RD, Rust, Scala, SQL , Swift, TCL, LaTeX , Visual Basic, VHDL, Wiki , XQ, YAML

Next, place the following script as close as possible to the closing <body> tag in your HTML file.

<script type="text/javascript" src="js/lang-css.js"></script>

Code Wellsv5.x

Custom CSS

Including Google Prettify