Questions about gatsby blocks of code

[liuweiyibai]

Hello, what can I do to have the code block display the code type, just like the code block of the gatsby official document, display the file type and file name.

like this:

[SabbeRubbish]

Hi liuweiyibai,

I too had wondered how this could be done.
According to multiple sources, the code block's "info string" (cfr. this article by the SynAck) is not standardized.
Also, the way things are rendered are quite different between for example Github and Gatsby docs.

Github markdown doesn't support this.
I tried your code block source code (see it on Github here)

```jsx:title=src/pages/index.js
import React from "react"

export default function Home() {
  return <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>
}
```

and in Github it just renders to:

However, if you look at code blocks in the Gatsby docs, the styling is quite different, already using the info string:
Github ignores the :title= attribute. But the Gatsby docs loves it:

So now you know the syntax:

```<filetype>:title=<title>

Hope this helps!

[liuweiyibai]

Hello, I found a way to add file type tags

const fs = require('fs');

const lables = [
  { lang: 'javascript', tag: 'js', bg: 'rgb(247, 223, 30)' },
  { lang: 'js', tag: 'js', bg: 'rgb(247, 223, 30)' },
  { lang: 'typescript', tag: 'ts', bg: 'rgb(41, 78, 128)', color: '#fff' },
  { lang: 'ts', tag: 'ts', bg: 'rgb(41, 78, 128)', color: '#fff' },
  { lang: 'css', tag: 'css', bg: '#ff9800' },
  { lang: 'scss', tag: 'scss', bg: '#ff9800' },
  { lang: 'jsx', tag: 'jsx', bg: '#61dafb' },
  { lang: 'html', tag: 'html', bg: 'rgb(0, 90, 156)',color:"#fff" },
  {
    lang: 'ignore',
    tag: 'ignore',
    bg: 'rgb(255,55,0)',
    color: '#fff',
  },
  {
    lang: 'nginx',
    tag: 'nginx',
    bg: 'rgb(0,161,0)',
    color: '#fff',
  },
  {
    lang: 'ruby',
    tag: 'ruby',
    bg: '#CC342D',
    color: '#fff',
  },
  { lang: 'bash', tag: 'sh', bg: '' },
  { lang: 'text', tag: 'text', bg: '#fff' },
  { lang: 'shell', tag: 'sh', bg: '' },
  { lang: 'json', tag: 'json', bg: '#8bc34a' },
  { lang: 'yaml', tag: 'yaml', bg: '#8bc34a' },
  { lang: 'diff', tag: 'diff', bg: '#e6ffed' },
  { lang: 'markdown', tag: 'md', bg: 'white' },
  { lang: 'graphql', tag: 'GraphQL', bg: '#e10098', color: '#fff' },
  { lang: 'docker', tag: 'docker', bg: '#2697ed', color: '#fff' },
  { lang: 'go', tag: 'go', bg: '#2697ed', color: '#fff' },
  { lang: 'env', tag: 'env', bg: '#2697ed', color: '#fff' },
  { lang: 'env', tag: 'tag', bg: '#2697ed', color: '#fff' },
];

const lablesStyles = lables
  .map(
    ({ lang, tag, bg = 'white', color = 'black' }) =>
      `.gatsby-highlight[data-language="${lang}"] pre:before {
      content: '${tag}';
      ${bg && `background: ${bg};`}
      ${color && `color: ${color};`}
    }`
  )
  .join(`\n`);

fs.writeFileSync('./label.css', lablesStyles);

I found a gatsby plug-in to add a title to the article

yarn add gatsby-remark-code-titles