Gatsby: Language block

[Dajamante]

Summary

Including a language block as in Lekoarts website or Gatsby.

Relevant information

Hello community!
I wish to have a little block indicating the language over the code blocks like in Lekoarts or Gatsby site. I am not ready for adopting Styled Components just yet, so:

• can I make a global .css file instead?
• or can I make a module.css file that is attached to blog-post template javascript page?
• is it something I can do from the config?
• even better, is it possible to indicate it from Markdown?

I'd rather take the absolute easiest way right now :)!

[LekoArts]

can I make a global .css file instead?
or can I make a module.css file that is attached to blog-post template javascript page

Both approaches are fine, they both will work.

is it something I can do from the config?

The CSS mentioned above requires some manual work from you, they code blocks itself are easily done.

even better, is it possible to indicate it from Markdown?

Yes, that's also how gatsbyjs.org does it (and other sites too).
You can e.g. write

````

const harry = spell('lumos')

````

---

So, how does it work?

You'll need to use gatsby-remark-prismjs or a remark plugin that adds certain classes to your code blocks.

If you inspect the first shell code block on https://www.gatsbyjs.org/docs/quick-start/, the output is:

<div class="gatsby-highlight"><pre class="language-shell"><button name="copy code to clipboard" class="css-93j64b">Copy<span aria-roledescription="status" class="css-16cz5zo erisdwh3">copy code to clipboard</span></button><code class="language-shell"><div class="token-line"><span class="token function">npm</span><span class="token plain"> </span><span class="token function">install</span><span class="token plain"> -g gatsby-cli</span></div></code></pre></div>

The gatsby-highlight and language-shell class is important. These classes are targeted by the CSS that gets set by Gatsby here in the source code. You essentially want to do the same: Create those CSS definitions.

The code I highlighted creates the label as a pseudo-element (::before).

I personally use a CSS-in-JS solution on my site and I adopted some parts of @janosh approach, which looks like this: lekoarts.de PrismJS styles. But I basically do the same: Create CSS definitions to target those classes.

[totsteps]

@Dajamante have a look at this issue. This is how I implement it for my website.

I am sure you are using gatsby-remark-vscode plugin. The generated code looks like this:

<pre class="dark-default-dark vscode-highlight language-jsx" data-language="jsx">
  <code class="vscode-highlight-code">
    ....
  </code>
</pre>

You can target data-language=jsx attribute with css like this:

pre[data-language="javascript"]::before {
  content: "js";
  background: #f7df1e;
}

[Dajamante]

Thanks to both, this is exactly what I am looking for!

So, how does it work?
You'll need to use gatsby-remark-prismjs or a remark plugin that adds certain classes to your code blocks.

I am not used at all to generated code, but If I understood well, instead of using typography themes, I can get more control and redo the whole typography file?
@gagan0723 funny that we ran in the same issue ten days apart 😃 . So does your css lies together with blog-post-template.js, or more global (I really never saw generated code before so I don't know how to handle it!)?

Guys, thank you so much ! Scratch the above comment. It works, at last 👍 🎉
I used @gagan0723 approach and included the pre in index.module.css.

Last one: now that I have tags, if I want to add some highlighting for assembler code, do I need to do that in vs-plugin options?

[totsteps]

What do you mean by assembler code?

[Dajamante]

Hello again! I mean MIPS assembler code: https://learnxinyminutes.com/docs/mips/

[Dajamante]

What do you mean by assembler code?

By the way, how do you target comments in code? When looking at the generated code, I get class .mtk3.
But whatever I try,
span.mtk3,
.mtk3
.dark-default.dark .mtk3
or div#gatsby-focus-wrapper span.mtk3, I cannot target it.

[totsteps]

Last one: now that I have tags, if I want to add some highlighting for assembler code, do I need to do that in vs-plugin options?

It should just work fine as with other code blocks.

For the comments you need to target .dark-default-dark .mtk3 not .dark-default.dark .mtk3.

Note: I think this issue is more of gatsby-remark-vscode specific instead of Gatsby, because of which I am closing this.

For additional queries regarding Gatsby you can join Discord channel.

Thanks

[Dajamante]

Sorry, in hastiness I wrote wrong.
This is what is in my css file:

.dark-default-dark .mtk3 {
  color: orange;
}