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
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