Hey everyone. Thought I would share what I did to get highlighting of code with syntax in-line.
I did this with PrismJS and with the theme Casper. It might not work with other types of setups.
<script type="text/javascript">
(function foo(){
var nodelist = document.getElementsByClassName('post-content')[0].getElementsByTagName('code');
for (i = 0; i < nodelist.length; i++) {
nodelist[i].className = 'language-python';
}
}());
</script>
Basically, this piece of code look for anything in the post you are writing, then assigns a css class name to it. Here, I used python, since that is what I use on my website. You will have to adapt the name to whatever you are using, if that is not Python.
Backquote is this symbol:
`
How to use it?
Press backquote (for me it’s shift plus the key to the left of the backspace)
1a. If your backquote does not appear immediatly, you can press spacebar
Insert code, write or copy-paste
Press backquote THEN spacebar
You cannot double press backquote and then insert, it has to be in that specific order, because that is how it works in the Koenig editor.
Note that this only works with one programming language at a time, unless you past it into the {{ghost_foot}} of every post and change the language-xxxx every time.
As a result, I get this look on my website when using it, which I am quite happy with.
Cool idea. I was looking for a solution to no syntax highlighting and prismjs looks simply perfect. They do say on their website that the /code/ blocks inherit any common ancestor language classes, and specifically say you can just add it to the “language-python” /body/ tag if you want the whole page of code blocks to be the same language. Seems that would make your function unnecessary, unless I am mistaken? I plan to try this out soon. Thanks for the idea.
I would like to use PrismJS, but I use different programming languages in each post.
Does anyone have a working example to use class insertion dynamically that identifies the code?
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.
In the rendered content the .language-x class will be added to the <pre> element in the same way as it is when using fenced code blocks inside a markdown card.
That’s completely up to you, prismjs is one example but there are many available.
No, there’s no way for us to know what language was used in older posts. You’re free to write a script that works directly with the database or via the Admin API to modify your old posts if you want to, otherwise the best option is to use JS as explained in the first post in this topic.
If you need to add extra classes such as line-numbers for your code blocks the best thing to do is to use JS, either in your theme or via Code Injection. Eg:
If you do this before your code highlighting <script> tag or before you initialise the code highlighting library then it will pick up the line-numbers class and style your code block appropriately.
If you need extra styles or advanced customisation of html then you can use the Markdown or HTML cards which is what they are there for.
Hi @Kevin. I updated to the most recent version of Ghost (as mine was 3 months old and PROBABLY not new enough… I would suggest you add the current version to the admin page, though, I could not find a version number anywhere in my dockerized image to be certain).
Can you explain exactly how to use this feature, “Like I’m 5” style? I can only so far find Markdown as a place where I can enter code with backtick like this: somestuff However, I can’t find any obvious way to get any reaction out of triple-backtick and anything I type after it while in Markdown mode. Am I doing it wrong? Thanks.
The version of Ghost that you are running is always shown on the About screen, you can access it by clicking the dropdown in the top-left of the screen.
The new feature is not related to the markdown card. The rich-text area supports using markdown text expansions to style text and create cards such as a code card. In the rich-text area you need to type ``` or ```lang then press Enter.
Guys I need a little help, if you can.
I wanted to solve everything using jquery, but in some situations it creates problems for me, like inserting spans and related token-punctuationtoken-function etc, and i use different programming languages in the same article, so it could become complex using jquery.
Also the “Copy” button even if I add the necessary classes with jquery does not seem to work.
So I decided to change at least the backticks in the database.
So as to at least make everything homogeneous and add the classes later.
I’m trying to use regex with sublime text 3.
Example:
I find and replace <p><code> with <pre><code>
The problem exists when I have to change backticks ` and \n
This:
`code`
Should become this:
```\\n
code
\\n```
I am experiencing some problems doing it.
Obviously when replacing in the whole file I don’t have to replace anything of what is inside and outside, but try to replace only what I need
I’m afraid there is no automatic workaround. The only workaround with multiple languages is using the code injection per post.
Then changing it for each post. But I guess otherwise it’s hard to make it general. You would need something that can distinguish one langauge from another, which is not something that is possible.
Perfect! Thank you. I did get the triple-backtick to work in the Markdown editor, and figured out you meant csharp rather thanlang+ (I expected a drop-down to appear or some other menu when I hit enter–I know, not the way it’s done, but communicating in text about actions is hard)… but it’s even cooler that you can triple-backtick anywhere without having to make a separate block for it. I’m glad I asked, because that’s a great feature. Is there a list of other clever things the rich text editor understands?
