# Prism Highlighting Formatting issues

**URL:** <https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286>\
**Category:** Developer help\
**Created:** [November 28, 2018, 6:49pm UTC](https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286 "2018-11-28T18:49:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![dahler](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/dahler/32/2010_2.png) [@dahler](https://forum.ghost.org/u/dahler)\
**Post date:** [November 28, 2018, 6:49pm UTC](https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286/1 "2018-11-28T18:49:51Z")

</div>

When I add the Prism.js css and js

- What’s your URL? [https://ghost.dahler.se/untitled/](https://ghost.dahler.se/untitled/)
- What version of Ghost are you using? Latest docker image
- What configuration?
- What browser? Google Chrome
- What errors or information do you see in the console? No errors
- What steps could someone else take to reproduce the issue you’re having?

Add the following code in the beginning of default.hbs

```
    {{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

```

Add the following code in the end of default.hbs

```
     {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
{{{block "scripts"}}}

{{!-- Prism Javascript --}}
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

{{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
{{ghost_foot}}

```

The latest Prism css and js is downloaded and put in the assets folder as per many instructions found on the web.

As you can can see from this picture the frame of the prism highlight section is t00 small and the font looks weird.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/8/87a8d2138dee762752bc5deddfd5d491773a29a8.png)

---

<div class="post-metadata">

**Author:** ![pascalandy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/pascalandy/32/444_2.png) [@pascalandy](https://forum.ghost.org/u/pascalandy)\
**Post date:** [November 28, 2018, 10:08pm UTC](https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286/2 "2018-11-28T22:08:40Z")

</div>

If this can help [this is how](https://github.com/firepress-org/FirePress_Klimax2/blob/dc065ebd91f29bed1f18eaa42095b2d2f9b75a1b/default.hbs#L34) I integrate highlight-js

Check between line 32 to 50 and 127 to 129.

Cheers!

---

<div class="post-metadata">

**Author:** ![dahler](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/dahler/32/2010_2.png) [@dahler](https://forum.ghost.org/u/dahler)\
**Post date:** [November 29, 2018, 9:16am UTC](https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286/3 "2018-11-29T09:16:06Z")

</div>

Seems pretty similar to what I did well except you using highlight.js ofcourse.

---

<div class="post-metadata">

**Author:** ![dahler](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/dahler/32/2010_2.png) [@dahler](https://forum.ghost.org/u/dahler)\
**Post date:** [November 29, 2018, 9:16am UTC](https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286/4 "2018-11-29T09:16:48Z")

</div>

This is the full link to my [default.hbs](https://github.com/carlba/Casper/blob/master/default.hbs)

---

<div class="post-metadata">

**Author:** ![pascalandy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/pascalandy/32/444_2.png) [@pascalandy](https://forum.ghost.org/u/pascalandy)\
**Post date:** [November 29, 2018, 7:45pm UTC](https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286/5 "2018-11-29T19:45:13Z")

</div>

Does it work with highlight then?

---

<div class="post-metadata">

**Author:** ![dahler](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/dahler/32/2010_2.png) [@dahler](https://forum.ghost.org/u/dahler)\
**Post date:** [November 29, 2018, 11:36pm UTC](https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286/6 "2018-11-29T23:36:44Z")

</div>

Yes highlight.js seems to work but I would prefer using prism because it has plugins that add functionality such as copying the source section. But until this issue is solved I am using this thank you for the suggestion 🙂

---

<div class="post-metadata">

**Author:** ![pascalandy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/pascalandy/32/444_2.png) [@pascalandy](https://forum.ghost.org/u/pascalandy)\
**Post date:** [November 30, 2018, 3:10am UTC](https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286/7 "2018-11-30T03:10:41Z")

</div>

Glad I could help!

---

<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 14, 2018, 3:10am UTC](https://forum.ghost.org/t/prism-highlighting-formatting-issues/4286/8 "2018-12-14T03:10:54Z")

</div>

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