How to easily add prism plugins to hosted (pro) account

I have a hosted account, so it was easy to add Prism syntax highlighting. The instructions had me add some injected code via the settings page:

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:

Hope this helps! :slight_smile:

1 Like

@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:

Is there a simple way to make it (and all code snippets) wider?

@frakman1 yes a simple CSS override should do the trick. Can you provide a link to your page?

1 Like

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.

Site Header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.css" integrity="sha512-PRPGfHKa2eGLwuAFVtaIaC1cOJDqw0zPfr5wWq06Nkt0w/KK6IPMNFwUOj/t6zq3D1vVAskdg18R93pLsxzErA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.css" integrity="sha512-cbQXwDFK7lj2Fqfkuxbo5iD1dSbLlJGXGpfTDqbggqjHJeyzx88I3rfwjS38WJag/ihH7lzuGlGHpDBymLirZQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.css" />
<style>
    pre[class*=language-] {
        margin: 1.75em 0;
        font-size: 1.4rem;
        background: #111;
    }
</style>

Site Footer:

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('pre[class*=language-]').forEach(function (node) {
            node.classList.add('line-numbers');
        });
        Prism.highlightAll();
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js"  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-clike.min.js" integrity="sha512-xXwwAe8scUySEhtfaHNqIBors65zyXbtpUOwKjOxesrIwna3Aca9XqcomKMx22u84uRTzsx1Hm7cIM/s1XPzgQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-bash.min.js"crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-css.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-docker.min.js"  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-go.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-hcl.min.js"  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-javascript.min.js" integrity="sha512-I4ZWqUpk7wqHcm7Gkv7k4IdgrDUTlGm1a7xeqyduqZLWeoGOn2E9us4XNBEDGclpk+6d1CmqIHYwmoyyL59zeA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-json.min.js"  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-makefile.min.js"  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-yaml.min.js"  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-python.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-c.min.js" integrity="sha512-T6Lco61aWqCKSznWkd38lf159pD0+EwZ9UCEv6ARAvaWFiy/UHtYgOmlasT8lq5Ck17ZNHzbe5eHUablTGRXxw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-cpp.min.js" integrity="sha512-hxZJ6OUEpUl9/o4C1gMGvrAbeqDaldBiZbs08c/V8NcU7YImBFlqJAc7Uzjf3bh2W8Wx26/dVDyPk9cUMQY0Mw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/show-language/prism-show-language.js" integrity="sha512-4JJqqBulCqr1+bN6TXHMjdXCnwFVAb1tu36ZnIeCCO3vqi6Jo8Q3UAXbSnavOvQUSW9qEPqMvPXoXzE5Z4pHWg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.js" integrity="sha512-br8H6OngKoLht57WKRU5jz3Vr0vF+Tw4G6yhNN2F3dSDheq4JiaasROPJB1wy7PxPk7kV/+5AIbmoZLxxx7Zow==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>



@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).

Sorry, beyond that I can’t help you without seeing the rendered/generated page code using the Elements/Styles Inspector (CTRL-Shift-I).

Maybe you can look at this demo page that uses the same theme:
https://iveel.co/ghost-themes/dawn-ghost-theme/preview

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:

pre {
overflow-x: scroll;
padding: 1.6rem 2.2rem;
line-height: 1.5;
white-space: pre;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background-color: var(--lighter-gray-color);
border-radius: 5px;
-webkit-overflow-scrolling: touch;
}

There are no right or left margins that I can see for the pre.

Instead, the width is being set by the containing div:

.kg-canvas {
display: grid;
grid-template-columns: [full-start] minmax(4vw,auto) [wide-start] minmax(auto,140px) [main-start] min(640px,calc(100% - 8vw)) [main-end] minmax(auto,140px) [wide-end] minmax(4vw,auto) [full-end];
}

…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.

I hope this helps. Unfortunately not so simple in this (the Dawn) theme.

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?

What Browser and Inspect tool are you using?

I’m using a Chrome Browser on a Mac. It looks like your screenshot. See my screenshot below. The highlighted section on the right is not editable.

Maybe try it in Firefox, or just try inserting your desired override in the header injection…

I was thinking of looking into the theme files here in Github and modifying the appropriate field.

I looked at post.hbs but the width is defined as wide

{{!< default}}

<div class="content-area">
    <main class="site-main">
        {{#post}}
            {{> content width="wide"}}
        {{/post}}
        {{#is "post"}}
            {{> related}}
            {{> comment}}
        {{/is}}
    </main>
</div>

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’ll play around with that…

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.

Try clearing all of your caches (browser, server, CDN) and ghost restart

Thanks for letting me know, I’ve updated the link

Thanks. That did the trick apparently.

1 Like