# Adding custom CSS classes to code blocks in Ghost v2.x

**URL:** <https://forum.ghost.org/t/adding-custom-css-classes-to-code-blocks-in-ghost-v2-x/4272>\
**Category:** Developer help\
**Created:** [November 27, 2018, 8:03pm UTC](https://forum.ghost.org/t/adding-custom-css-classes-to-code-blocks-in-ghost-v2-x/4272 "2018-11-27T20:03:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![whitfin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/whitfin/32/2001_2.png) [@whitfin](https://forum.ghost.org/u/whitfin)\
**Post date:** [November 27, 2018, 8:03pm UTC](https://forum.ghost.org/t/adding-custom-css-classes-to-code-blocks-in-ghost-v2-x/4272/1 "2018-11-27T20:03:36Z")

</div>

Hi!

I’ve recently upgraded to Ghost 2.x, and noticed that code blocks via ``` now generate a new widget in the editor. In the past I was able to do the following to add custom CSS classes (ignore the space, it’s for rendering):

> ` ``my-class

Is this possible in the Ghost v2.x editor directly? If not, does this seem like something we can put in place? I know I can make a markdown block in the meantime to get around it - but that removes some of the UX of the new editor.

Thanks!

---

<div class="post-metadata">

**Author:** ![MLFromScratch](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/mlfromscratch/32/2278_2.png) [@MLFromScratch](https://forum.ghost.org/u/MLFromScratch)\
**Post date:** [November 27, 2018, 9:40pm UTC](https://forum.ghost.org/t/adding-custom-css-classes-to-code-blocks-in-ghost-v2-x/4272/2 "2018-11-27T21:40:24Z")

</div>

You cannot add custom css to the code editor in anyways, but Ghost will style your CSS for you (if thats what you are asking?). Like this:

````
 ```css
 p {
     text-align: center;
     color: red;
 } 
 ```

````

Becomes this:

```css
p {
    text-align: center;
    color: red;
} 

```

Else you can use [Prism](https://prismjs.com/) for highlighting your code.

---

<div class="post-metadata">

**Author:** ![whitfin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/whitfin/32/2001_2.png) [@whitfin](https://forum.ghost.org/u/whitfin)\
**Post date:** [November 28, 2018, 1:15am UTC](https://forum.ghost.org/t/adding-custom-css-classes-to-code-blocks-in-ghost-v2-x/4272/3 "2018-11-28T01:15:54Z")

</div>

I’m using HighlightJS, but sometimes it needs a class adding to the code blocks - i.e. for JavaScript code I would add a “javascript” class to the code block.

In previous versions of Ghost, this is possible because you can provide the class using the Markdown syntax. I’m looking for a solution in the Ghost v2.x editor, where this seems to not be possible.

---

<div class="post-metadata">

**Author:** ![John](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/john/32/29288_2.png) [@John](https://forum.ghost.org/u/John)\
**Post date:** [November 28, 2018, 4:08am UTC](https://forum.ghost.org/t/adding-custom-css-classes-to-code-blocks-in-ghost-v2-x/4272/4 "2018-11-28T04:08:02Z")

</div>

Currently the way to do it is to use a Markdown card, as you mentioned. We’re planning to add it into the main editor area too, as soon as there’s time. Or if you want to see that happen sooner, you can always write the functionality yourself thanks to being open source

---

<div class="post-metadata">

**Author:** ![MLFromScratch](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/mlfromscratch/32/2278_2.png) [@MLFromScratch](https://forum.ghost.org/u/MLFromScratch)\
**Post date:** [November 28, 2018, 5:57pm UTC](https://forum.ghost.org/t/adding-custom-css-classes-to-code-blocks-in-ghost-v2-x/4272/5 "2018-11-28T17:57:52Z")

</div>

Yes, that is indeed correct.

That is why I suggested for you to use Prismjs, because that does it for you automatically when you write “javascript” instead of “css” or something else.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/b/ba9ce5100b8bb264586f4f572545596b2ce3f081.png) [@system](https://forum.ghost.org/u/system)\
**Post date:** [December 12, 2018, 5:57pm UTC](https://forum.ghost.org/t/adding-custom-css-classes-to-code-blocks-in-ghost-v2-x/4272/6 "2018-12-12T17:57:59Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

**Author:** ![Kevin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kevin/32/32_2.png) [@Kevin](https://forum.ghost.org/u/Kevin)\
**Post date:** [May 7, 2019, 11:49am UTC](https://forum.ghost.org/t/adding-custom-css-classes-to-code-blocks-in-ghost-v2-x/4272/7 "2019-05-07T11:49:01Z")

</div>

As of Ghost 2.22.0 it’s now possible to set the language when using fenced code blocks…

````lang`+Enter will set the language immediately when creating the code card or you can use the language input inside the code card once it’s created.