However, I also want to add line numbers. That’s via a Prism plugin. I’m hoping there’s a really easy way to do that, but the Prism documentation is too general to tell. Is there?
(Tweaking theme zip files and uploading them counts as “really easy”, but I seek clarity about what to put where. I’m a backend programmer, so I’m ignorant of a lot of tacit knowledge about working with CMS’s. And I want to keep being ignorant.)
Hi @marick. We’ve just put together a tutorial for just this kind of thing, including how to add line numbers! Take a look and let me know how you get on:
@DavidDarnes The link is no lonker working. It has changed to:
Kindly update the link.
I followed the instructions and was finally able to get my code snippets to look how I want them with the right theme, line numbers and copy-to-clipboard button.
My only issue is that the code block is too narrow. See screenshot below:
Unfortunately, it’s a private, internal page at the moment. It’s just a default ghost docker installation using the Dawn theme.
Rather than change the default.hbs file (which didn’t work for me) I opted to use “code injection” in Site Header and Site Footer as the documentation suggested. I am using the values below for both.
Can you please recommend the changes required to increase the width?
Although I am using the show-language script, I don’t see the language name shown in the code block of the post. I’m probably missing something else since it’s a “plugin”. Any pointers would be appreciated.
@frakman1 it looks like the right and left margins are lining up correctly inside your post content. To widen the entire post contents, you could override the post content block CSS margins and/or padding (for the whole site or for just that page).
You can also wrap the lines inside the code snippet with some more CSS to prevent the horizontal scroll bar at the bottom of the snippet.
Sorry, beyond that I can’t help you without seeing the rendered/generated page code using the Elements/Styles Inspector (CTRL-Shift-I).
I am not HTML or CSS savvy enough to know what changes you mean by these overrides, padding and margins. Do they need to go in the “Code Injection” section or somewhere in the theme files?
OK @frakman1 – so here is what I see in the Elements/Styles Inspector (CTRL-Shift-I) on the Style Guide for the Dawn theme, looking at the Syntax Highlight demo:
…and so it appears that the grid-template-columns in the .kg-canvas class constraining the entire post content is the CSS that you will have to override (at least first) in order to widen your code snippet (pre) sections.
Thanks for digging into this. Yes, I follow you up until the .kg-canvas class but how do I change it just to test? The Inspect tool doesn’t let me edit the entries in the right hand window. I also have no idea what to change exactly. Is this the value that needs to change? min(640px or something else?
I then looked for wide and found a reference to it in a kg CSS file (I probably should have looked for kg directly): ./assets/css/misc/kg.css:148:.kg-width-wide {
Anyway, the kg.css file has that highlighted section:
I was able to edit those fields in the inspector when I tried it again in a new window.
I got the code block to widen when changing the value 640 to something bigger in:
min(640px, calc(100% - 8vw))
However, when I changed the value in the file kg.css and reloaded ghost, it still shows up as narrow and with 640 from within the inspector. I just don’t get it.
