"Code highlighting the easy way"
Bootstrap 3.1.0 Snippet by mrmccormack

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-2"> <br> <img src="http://www.brainytuts.com/wp-content/uploads/2013/02/cool-html-codes.jpg" class="img-responsive img-rounded center-block" alt=""> </div><!--/.col--> <div class="col-md-10"> <h3> Mr. M.'s code highlighting the easy way ! </h3> <p> <a href="http://bootsnipp.com/iframe/yB9o" target="_blank">View Full Screen</a> </p> <p> I decided that the best way to display code in a Twitter Bootstrap site is using a Github Gist embed. It seemed complicated to work with TB's doc.css (that's what they use on their site). Google's "prettify", "highlight.js" and a few others seemed complicated and required many files. </p> <p> Consider this example, taken from Twitter Bootstrap Docs. We will use a Github Gist to embed the same code and color it.<br> Ref: <a href="http://getbootstrap.com/getting-started/#template" target="_blank">http://getbootstrap.com/getting-started/#template</a> </p> </div><!--/.col--> </div> <!--/.row--> <div class="row"> <h1 class="page-header"> Basic template </h1> <p class="lead"> Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs. </p> <p> Copy the HTML below to begin working with a minimal Bootstrap document. </p> <div class="codebox"> <script src="https://gist.github.com/robmccormack/9179548.js" type="text/javascript"></script> </div><!--/.col--> </div><!--/.row--> <!-- links --> <a href="https://gist.github.com/robmccormack/9179548" target="_blank">view it on github.com</a><br> <br> <a href="http://bl.ocks.org/robmccormack/9179548" target="_blank">view it on bl.ocks.org</a><br> <br> <a href="http://tinyurl.com/tbvalid8" target="_blank">HTML 5 Valid</a> </div><!--/ .container-->
.codebox { width:85%; }

Related: See More


Questions / Comments: