gatsby-remark-prismjs-title

gatsby-remark-prismjs-add-title

Adds a code title to code snippets

Install

npm install gatsby-remark-prismjs-add-title --save-dev

How to use

settings

in your gatsby-config.js

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-prismjs-title',
          options: {
            className: 'your-custom-class-name'
          }
        } // IMPORTANT: this must be ahead of other plugins that use code blocks
      ]
    }
  }
]

Include CSS

The title tag is set to the gatsby-code-title class. Set the style according to the style set in the code.

The following is an example of using okaidia for prism.js style.

.gatsby-code-title {
  display: block;
  position: relative;
  background: #272822;
  width: 100%;
  top: 10px;
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}

.gatsby-code-title span {
  display: inline;
  position: relative;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  color: #eee;
  background: #777;
  border-top-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  padding: 3px;
  top: 1px;
}

Usage in Markdown

in your Markdown content

```js:title=example-file.js
alert('how cool is this!');
```js

This plug-in analyzes Markdown AST and converts it into the following structure.

<div class="gatsby-code-title"><span>example-file.js</span></div>
```js
alert('how cool is this');
```

It can be used in combination with gatsby-remark-prismjs highlighting and line number display.

```go{numberLines: true}{4,8-9}:title=example.go
package main

import (
	"fmt"
)

func main() {
	fmt.Println("Hello")
	fmt.Println("World")
}
```

Difference from gatsby-remark-code-titles

It can be used simultaneously with gatsby-remark-prismjs Line Highlight. Also, enclose the title with the span tag.

• gatsby-remark-code-titles

  <div class="gatsby-code-title">title</div>

• This Plugin

  <div class="gatsby-code-title"><span>title</span></div>