gridsome-plugin-remark-prismjs-all



Adds syntax highlighting to code blocks in markdown files using PrismJS

See live demo here !

Inspired by gatsby-remark-prismjs



!example

Installation

``bash
npm i gridsome-plugin-remark-prismjs-all
`

$3

`js
// In your gridsome.config.js
transformers: {
//Add markdown support to all file-system sources
remark: {
externalLinksTarget: '_blank',
externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
anchorClassName: 'icon icon-link',
plugins: [
'gridsome-plugin-remark-prismjs-all',
]
}
}
`

$3

There is only 3 themes available at this time. Contributions welcomes !

`js
// In your main.js
require("gridsome-plugin-remark-prismjs-all/themes/night-owl.css");
`

`js
// In your main.js
require("gridsome-plugin-remark-prismjs-all/themes/tomorrow.css");
`

`js
// In your main.js
require("gridsome-plugin-remark-prismjs-all/themes/solarized.css");
`

Options

$3

`js
// In your gridsome.config.js
transformers: {
//Add markdown support to all file-system sources
remark: {
externalLinksTarget: '_blank',
externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
anchorClassName: 'icon icon-link',
plugins: [
['gridsome-plugin-remark-prismjs-all', {
highlightClassName: "myCustomClass", //Default gridsome-highlight
codeTitleClassName: "customCodeTitle", //Default 'gridsome-code-title'
showLineNumbers: true, // require("prismjs/plugins/line-numbers/prism-line-numbers.css");
languageExtensions: [
{
language: "superscript",
extend: "javascript",
definition: {
superscript_types: /(SuperType)/,
},
insertBefore: {
function: {
superscript_keywords: /(superif|superelse)/,
},
},
},
],

}]
]
}
}
`

$3

`js
// In your gridsome.config.js
transformers: {
//Add markdown support to all file-system sources
remark: {
externalLinksTarget: '_blank',
externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
anchorClassName: 'icon icon-link',
plugins: [
['gridsome-plugin-remark-prismjs-all', {
highlightClassName: "gridsome-highlight",
codeTitleClassName: "gridsome-code-title",
classPrefix: 'language-',
aliases: {},
noInlineHighlight: false,
showLineNumbers: false, // require("prismjs/plugins/line-numbers/prism-line-numbers.css");
languageExtensions: [],
prompt: { // require("prismjs/plugins/command-line/prism-command-line.css");
user: root,
host: localhost,
global: false,
}
}]
]
}
}
`

Include CSS

$3

PrismJS ships with a number of themes

Additional themes: prism-themes

To load a theme, just require its CSS file in your main.js file, e.g.

`js
require("prismjs/themes/prism-solarizedlight.css");
`

$3

If you want to add line numbering alongside your code, you need to import the corresponding CSS file from PrismJS, right after importing your colorscheme in main.js

`js
//main.js
require("prismjs/themes/prism-solarizedlight.css");
require("prismjs/plugins/line-numbers/prism-line-numbers.css");

`

You also need to add some additional CSS:

`css
/**
* Add back the container background-color, border-radius, padding, margin
* and overflow that we removed from

.

 */

.gridsome-highlight {

  background-color: #fdf6e3; / for solarized theme /

  border-radius: 0.3em;

  margin: 0.5em 0;

  padding: 1em;

  overflow: auto;

}

.gridsome-highlight-code-line {

  background-color: #feb; / for solarized theme /

  display: block;

  margin-right: -1em;

  margin-left: -1em;

  padding-right: 1em;

  padding-left: 0.75em;

  border-left: 0.25em solid #f99;

}



/**

 * Remove the default PrismJS theme background-color, border-radius, margin,

 * padding and overflow.

 * 1. Make the element just wide enough to fit its content.

 * 2. Always fill the visible space in .gatsby-highlight.

 * 3. Adjust the position of the line numbers

 */

.gridsome-highlight pre[class*="language-"] {

  background-color: transparent;

  margin: 0;

  padding: 0;

  overflow: initial;

  float: left; / 1 /

  min-width: 100%; / 2 /

}



/ Adjust the position of the line numbers /

.gridsome-highlight pre[class*="language-"].line-numbers {

  padding-left: 2.8em;

}

`



$3



Example:



``

`js{codeTitle: "In src/main.js"}

require("prismjs/themes/prism-solarizedlight.css")

require("prismjs/plugins/line-numbers/prism-line-numbers.css")

require("prismjs/plugins/command-line/prism-command-line.css")

`

``



Is rendered as:



`html



  In src/main.js





  

        ... code here

    
  >



`



You can add this CSS:



`css

.gridsome-code-title {

  position: relative;

  z-index: 100;

  margin-bottom: -0.8em;

  background-color: #feb; / solarized highlight lines color /

  color: red; / why not ;-) /

  font-style: italic;

  font-weight: 100;

  text-align: center;

  font-family: PT Mono, Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  line-height: 1.5;

  border-top-left-radius: 0.3em;

  border-top-right-radius: 0.3em;

}

`



You can also target the spantag.



Usage in Markdown



$3



``markdown

`js

const myvar = 'some value";

`

``



$3



``md

`js{codeTitle: "In src/main.js"}

require("prismjs/themes/prism-solarizedlight.css");

require("prismjs/plugins/line-numbers/prism-line-numbers.css");

require("prismjs/plugins/command-line/prism-command-line.css");

`

``



$3



To see the line numbers alongside your code, you can use the numberLines option:



``md

`html{numberLines: true}



`

``



You can also start numbering at any index you wish (here, numbering

will start at index 21):



``md

`html{numberLines: 21}



`

``



$3



You can also add line highlighting. It adds a span around lines of code with a

special class .gridsome-highlight-code-line that you can target with styles.



You can specify the highlighted lines outside of the code block.

In the following code snippet, lines 3 and 5 through 7 will get the line

highlighting. The line range parsing is done with

.



``md

`html{3,5-7}



`

``



$3



``md

`html{3,5-7}{numberLines: 21}{codeTitle: "In src/pages/Index.vue"}



`

``



$3



To show fancy prompts next to shell commands (only triggers on bash), either set prompt.global to true in gridsome.config.js,

or pass at least one of {outputLines: }, {promptUser: }, or {promptHost: } to a snippet



By default, every line gets a prompt appended to the start, this behaviour can be changed by specifying {outputLines: }

to the language.



``

`bash{outputLines: 2-10,12}

``



The user and host used in the appended prompt is pulled from the prompt.user and prompt.host values,

unless explicitly overridden by the promptUser and promptHost options in the snippet, e.g.:



``

`bash{promptUser: alice}{promptHost: dev.localhost}

``



$3



You can provide a language extension by giving a single object or an array of

language extension objects as the languageExtensions option.



A language extension object looks like this:



`javascript

languageExtensions: [

  {

    language: "superscript",

    extend: "javascript",

    definition: {

      superscript_types: /(SuperType)/

    },

    insertBefore: {

      function: {

        superscript_keywords: /(superif|superelse)/

      }

    }

  }

];

`



used options:



- language (optional) The name of the new language.

- extend (optional) The language you wish to extend.

- definition (optional) This is the Prism language definition.

- insertBefore (optional) Is used to define where in the language definition we want to insert our extension.



More information of the format can be found here:

https://prismjs.com/extending.html



Note:



- One of the parameters language and extend is needed.

- If only language is given, a new language will be defined from scratch.

- If only extend is given, an extension will be made to the given language.

- If both language and extend is given, a new language that extends the extend language will

  be defined.



In case a language is extended, note that the definitions will not be merged.

If the extended language definition and the given definition contains the same

token, the original pattern will be overwritten.



One of the parameters definition and insertBefore needs to be defined.

insertBefore needs to be combined with definition or extend (otherwise

there will not be any language definition tokens to insert before).



In addition to this extension parameters the css also needs to be updated to

get a style for the new tokens. Prism will wrap the matched tokens with a

span element and give it the classes token and the token name you defined.

In the example above we would match superif and superelse. In the html

it would result in the following when a match is found:



`html

superif

``







History



Discover the release history by heading on over to the releases page.