2. 3.x Component Gallery
  3. Code Wells

Code Wells

v3.x

Code wells display computer languages in a highly readable format.

Code Wells are rendered with the <pre> element. Google's Prettify package is used to color-code the output. Unlike other HTML elements, the <pre> element preserves all spacing exactly as you type it. In most cases, the tool will autodetect your language and color the code accordingly.

BBootstrap 3.x | Code wells 

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

<pre class='prettyprint linenums'>
// 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 disable the alternating backgrounds on numbered lines. Alternating backgrounds on numbered lines are fine on lighter backgrounds but generally look poor on darker backgrounds.

View all custom Bootstrapr.io CSS 
/* Disables the background for alternating line numbers */
ol.linenums li {
   background: transparent !important;
}

Notes

Including Google Prettify

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

1 Inlcude a link to a cloud-hosted prettify.js file within the <head> element of your HTML file. 
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
2 Add the .prettyprint class to your <pre> element. 
<pre class="prettyprint"> ... </pre>
3 Although in many cases, Prettify will auto-detect your language, we recommend specifying it explicitly. 
<pre class='prettyprint lang-css'> ... Your code here ... </pre>
4

If your language is not supported natively—as is the case with CSS—you will need to include a link to the specific language file. First, download the appropriate language file from the following list:

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, serve it from a subdirectory of your Web site, such as: 

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