From 312e77a7f3e46bc684e1772f7d705c607c7ae87f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Apr 2015 00:44:58 -0700 Subject: [PATCH] redesign highlightable code and allow line numbers --- _posts/2014-01-01-example-content.md | 15 ++++++++++- _sass/_code.scss | 38 ++++++++++++++++++---------- 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/_posts/2014-01-01-example-content.md b/_posts/2014-01-01-example-content.md index 6c0f875..a090b1e 100644 --- a/_posts/2014-01-01-example-content.md +++ b/_posts/2014-01-01-example-content.md @@ -49,7 +49,7 @@ Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est ### Code -Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus. +Inline code is available with the `` element. Snippets of multiple lines of code are supported through Pygments. Longer lines will automatically scroll horizontally when needed. {% highlight js %} // Example can be run directly in your JavaScript console @@ -62,6 +62,19 @@ adder(2, 6); // > 8 {% endhighlight %} +You may also optionally show code snippets with line numbers. Add `linenos` to the Pygments tags. + +{% highlight js linenos %} +// Example can be run directly in your JavaScript console + +// Create a function that takes two arguments and returns the sum of those arguments +var adder = new Function("a", "b", "return a + b"); + +// Call the function +adder(2, 6); +// > 8 +{% endhighlight %} + Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa. ### Gists via GitHub Pages diff --git a/_sass/_code.scss b/_sass/_code.scss index b4f5734..21a9e5e 100644 --- a/_sass/_code.scss +++ b/_sass/_code.scss @@ -7,6 +7,7 @@ code, pre { font-family: Menlo, Monaco, "Courier New", monospace; } + code { padding: .25em .5em; font-size: 85%; @@ -14,19 +15,12 @@ code { background-color: #f9f9f9; border-radius: 3px; } + pre { - display: block; margin-top: 0; margin-bottom: 1rem; - padding: 1rem; - font-size: .8rem; - line-height: 1.4; - white-space: pre; - white-space: pre-wrap; - word-break: break-all; - // word-wrap: break-word; - background-color: #f9f9f9; } + pre code { padding: 0; font-size: 100%; @@ -36,13 +30,31 @@ pre code { // Pygments via Jekyll .highlight { + padding: 1rem; margin-bottom: 1rem; - border-radius: 4px; -} -.highlight pre { - margin-bottom: 0; + font-size: .8rem; + line-height: 1.4; + background-color: #f9f9f9; + border-radius: .25rem; + + pre { + margin-bottom: 0; + overflow-x: auto; + } + + .lineno { + display: inline-block; // Ensures the null space also isn't selectable + padding-right: .75rem; + padding-left: .25rem; + color: #999; + // Make sure numbers aren't selectable + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } } + // Gist via GitHub Pages // .gist .gist-file { // font-family: Menlo, Monaco, "Courier New", monospace !important; -- 2.39.5