Code Wellsv4.x

Code wells display computer languages in a 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.

Bootstrap 4.x | Code Wells 


// 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. Alternating backgrounds on numbered lines are fine on lighter backgrounds but generally look poor on darker backgrounds.

/* 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 these steps. 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>

This will reset the page. Are you sure?