code-title

July 26, 2020

Putting titles on code blocks of Gatsby markdown

Installing plugin

yarn add gatsby-remark-code-titles

Putting plugin into gatsby-config.js

gatsby-config.js
module.exports = {
  plugins: [
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-code-titles`,
      ];
    }
  ],
};

Creating css

src/styles/remark-code-title.css
.gatsby-code-title {
  background: #999;
  color: #eee;
  margin: 24px 0px -24px;
  padding: 6px 12px;
  font-size: 0.8em;
  line-height: 1;
  font-weight: bold;
  display: table;
  border-radius: 4px 4px 0 0;
}

Modifying gatsby-browser.js

gatsby-browser.js
import "./src/styles/remark-code-title.css";

Now, ready to go

We can put a title if we write like this.

    ```js:title=index.js
    // Insert your code
    ```

Then, we can see a title on a code block

Written by Yasuhiro Ito
Software engineer

© 2021, Yasuhiro Ito