Un affichage de code stylé avec Gatsby et react-syntax-highlighter !

Etant donné que je suis une développeuse en herbe, le contenu de mon blog contient forcément des petits bouts de code ça et là. Seulement voilà, comme je rédige mes articles via strapi, et donc en MarkDown, je n'ai pas vraiment la main sur le style du contenu. C'est la que le package react-syntax-highlighter entre en jeu!

On commence donc par l'installer (basique) du côté Garsby du blog :

npm install react-syntax-highlighter

Puis on va créér un fichier CodeBlock.js dans notre dossier component :

import React, { PureComponent } from "react"
import PropTypes from "prop-types"
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism"

class CodeBlock extends PureComponent {
  render() {
    const { language, value } = this.props
    return (
      <SyntaxHighlighter language={language} style={okaidia}>
        {value}
      </SyntaxHighlighter>
    )
  }
}

CodeBlock.propTypes = {
  value: PropTypes.string.isRequired,
  language: PropTypes.string,
}

CodeBlock.defaultProps = {
  language: "javascript",
}

export default CodeBlock

Et un fichier InlineBlock.js au même endroit :

import React, { PureComponent } from "react"
import PropTypes from "prop-types"

const codeStyles = {
  fontFamily: '"Inconsolata", monospace',
  margin: "3px",
  padding: "4px 6px",
  backgroundColor: "#f7f7f7",
  border: "1px solid #ededed",
  borderRadius: "5px",
  boxShadow: "rgba(0, 0, 0, 0.1) 1px 1px 10px 0px",
}

class InlineCode extends PureComponent {
  render() {
    const { value } = this.props
    return <code style={codeStyles}>{value}</code>
  }
}

InlineCode.propTypes = {
  value: PropTypes.string.isRequired,
}

export default InlineCode

Enfin, on va intégrer ça dans templates/article.js :

//Import des fichiers
import CodeBlock from "../components/CodeBlock"
import InlineCode from "../components/InlineCode"

//Intégration de react-syntax-highlighter dans le rendu
  <ReactMarkdown
          source={article.content}
          renderers={{ code: CodeBlock, inlineCode: InlineCode }}
        />
      </div>

Enfin, quand on rédige du code en MarkDown, on n'oublie pas de préciser le language !

Simple comme bonjour (après quelques heures de recherche quand même) !