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!
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:
p {
text-align: center;
color: red;
}
Else you can use Prism for highlighting your code.
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.
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
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.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
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.