Differentiate between Code Examples

Let’s say one is writing a tutorial with code-examples showing code-snippets from the command-line, and code-snippets from javascript files. One could use screenshots from the commandline with, for example, a dark theme and javascript snippets in plain text within a pre tag syntax-highlighted with a light theme, in order to differentiate between the two in a clear manner.

Screenshots can work well when done right, even when displaying text; like code-snippets. Adept them, have arrows with additional explaining text next to it. Craft them well and you can get something like this which gets it’s point across in an hands-on manner: considering this complicated matter.

Combining a colorscheme’s dark– and light version

But even when working with screenshots of code-snippets, one can mix it up with plain text in pre-tags. To keep consistency in design, one would want those themes to be related in color, or better use the same colors of a colorscheme in a dark and light version (dark being in a way “inverted”), have the commandline code-snippets be informed by the dark version of the colorscheme and, visa versa, the javascript examples colors informed by the light version. You may go about it like this:


$ npm install gulp gulp-sass --save-dev
This line tells [npm](//npmjs.com) to install both `gulp` and `gulp-sass` packages as development dependencies. You can now find them in the `devDependencies` object of your `package.json`. And the `Gulpfile.js`:

var gulp = require('gulp');
var sass = require('gulp-sass');

This is not difficult to achieve with Prism syntax-hightlighter combined with Sass-variables for colors.

Check out this demo at Codepen to see how the <pre class="language-bash"> is targeted in the CSS You can see how this works out in a different example here.

This article was also published on Codepen