gridsome-plugin-remark-codetitle's Introduction

gridsome-plugin-remark-codetitle

Adds a code title to code snippets

Install

npm install gridsome-plugin-remark-codetitle --save-dev

Settings

in your gridsome-config.js

...
transformers: {
    //Add markdown support to all file-system sources
    remark: {
      ...
      plugins: [
          ...
          ['gridsome-plugin-remark-codetitle', {
              className:'your-custom-class-name'
              }], // IMPORTANT: this must be ahead of other plugins that use code blocks
          '@gridsome/remark-prismjs'
          ...
      ]
    }
  }

Usage in Markdown

in your Markdown content

```js:title=example-file.js
const visit = require('unist-util-visit');
```js

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

<div class="gridsome-code-title"><span>example-file.js</span></div>
```js
const visit = require('unist-util-visit');
```

Add CSS

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

.gridsome-code-title {
    display: block;
    position: relative;
    background: #fffbf3;
    width: 100%;
    top: 10px;
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
  }
  
  .gridsome-code-title span {
    display: inline;
    position: relative;
    font-size: .85em;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    color: #232129;
    background: rgb(247, 223, 30);
    border-top-left-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
    padding: 3px;
    top: 1px;
  }

Recommend Projects