Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gitbook-plugin-code-highlighter with all npm packages installed. Try it out:

var gitbookPluginCodeHighlighter = require("gitbook-plugin-code-highlighter")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gitbook-plugin-code-highlighter v1.0.7

Highlight specific lines of code using a special string at the beginning of a line.

gitbook-plugin-code-highlighter

GitBook plugin to highlight specific lines in code blocks.

Example

Here are a couple of highlighted Python code lines using a yellow background:

The above example was generated from these source lines:

from os import environ
&&&from fabric.api import *
from fabric.context_managers import cd
&&&from fabric.contrib.files import sed

Plugin Installation

  1. Make sure you have GitBook and the gitbook-cli installed.

  2. The default highlight plugin that is built into GitBook must be disabled, because it prevents other plugins from processing code blocks. Here is an example book.json with the highlight plugin disabled and this code-highlighter plugin enabled.

     {
         "author": "Matthew Makai",
         "cover": "cover.jpg",
         "gitbook": "2.x.x",
         "plugins": ["-highlight", "code-highlighter"],
         "title": "The Full Stack Python Guide to Deployments",
         "pdf": {
             "pageNumbers": true,
             "headerTemplate": " ",
             "footerTemplate": " "
         }
     }
    
  3. Run gitbook install to pull down the latest plugin version from NPM.

How To Use After Installation

Within a block code prepend &&& to each line that should be highlighted. Then add a .code-line-highlight property with a background-color to the .css files under the styles/ directory.

For example, your styles/ directory can contain a pdf.css with this line:

.code-line-highlight {background-color: #ffff00;}

That will highlight each selected line in yellow.

For more information on styling, refer to the GitBook docs.

More Information

The &&& mark and the CSS class can be made configurable, but I have not added that feature just yet.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free