gatsby-remark-code-headers
Adds a customizeable header, like a filename, to code blocks for Gatsby.js.
Installation
You must be already using gatsby-transformer-remark. To install, run
$ npm install --save-dev gatsby-remark-code-headers
Then, in gatsby-config.js
, update your options for gatsby-transformer-remark
:
plugins: resolve: 'gatsby-transformer-remark' options: plugins: resolve: 'gatsby-remark-code-headers' options: className: 'optional-custom-class-name'
Usage
In your Markdown file, add a header comment to the first line of any code block:
### Code ```js// Header: filename.jsconsole;``` ```python# Header: This is a Python file print('Hello World!')```
The header comment must be formatted exactly like one of the examples above. This plugin will replace the header comment with HTML for the header. It effectively transforms the above markdown into this:
### Code <div class="gatsby-code-header"><h5>filename.js</h5></div>```jsconsole;``` <div class="gatsby-code-header"><h5>This is a Python file</h5></div>```pythonprint('Hello World!')```
Styling
Once your integration works, you'll probably want to style the code header. Here's some example CSS you can use as a starting point: