Blog Posts

gatsby-remark-prismjs

authors: Paul Kim

date: January 01, 2021

category: foo

tags: gatsby, gatsby-remark-prismjs

Usage in Markdown

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [`gatsby-remark-prismjs`],
    },
  },
]

Line numbering

use the numberLines option to see the line numbers alongside your code.

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-prismjs`,
      ]
    }
  }
]

You can also start numbering at any index you wish.

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-prismjs`,
      ]
    }
  }
]

Line highlighting

You can also add line highlighting.

  • highlight-line highlights the current line;
  • highlight-next-line highlights the next line;
  • highlight-start highlights the lines until the matching hightlight-end;
  • highlight-range{1, 4-6} will highlight the next line, and the fourth, fifth and sixth lines.
class FlavorForm extends React.Component {  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});  }

  handleSubmit(event) {    alert('Your favorite flavor is: ' + this.state.value);    event.preventDefault();  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>            <option value="grapefruit">Grapefruit</option>            <option value="lime">Lime</option>            <option value="coconut">Coconut</option>            <option value="mango">Mango</option>          </select>        </label>
        <input type="submit" value="Submit" />
      </form>    );
  }
}

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

// In your gatsby-config.jsplugins: [
  {
    resolve: `gatsby-transformer-remark`,    options: {      plugins: [        `gatsby-remark-prismjs`,
      ]
    }
  }
]

ChromeEdgeFirefoxOpera

© 2021 paulkode.com. All rights reserved.