-
-
Notifications
You must be signed in to change notification settings - Fork 605
Add syntax highlighting with Prism
Eduardo Gómez edited this page Dec 30, 2019
·
1 revision
The easiest (and recommended) way to install Prism on your blog is by following these steps:
-
Open the admin panel of your Ghost instance and head to the Code injection page.
-
Add the Prism stylesheets links to the Blog Header section. For example, you can paste the following lines in order to use the theme Tomorrow:
<!-- prism.js -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-tomorrow.min.css" />
You can replace that theme for another you might like. Also you can add the following styles to make it prettier:
<style>
pre[class*="language-"] {
margin: 0 0 1.5em !important;
}
code {
text-shadow: none !important;
}
.token.operator {
background: none !important;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #20262E !important;
}
</style>
- Add the Prism scripts to the Blog Footer section. For example, you can paste the following lines in order to support HTML, CSS and Javascript syntax:
<!-- prism.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-javascript.min.js"></script>
Of course you can add more languages if needed or remove the ones you don't need.