Code highlighting

We understand code highlighting is an essential feature in documentation site. That's why we implemented code highlighting within this theme using popular and light weight prism.

Her are some Example

<div class="topic-card">
	<img src="" alt="" class="topic-image">
    <h2 class="h3 topic-name"><a href="">Getting Started</a></h2>
    <p class="topic-description">
    	Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque impedit nemo delectus reprehenderit dignissimos magni.
    </p>
</div>

.comment-wrap {
    background: #fff;
	padding: 1.5em 2em;
	box-sizing: border-box;
	margin-bottom: 1.5em;
}

.single-post-wrap {
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow);
    border-radius: 7px;
    .post-title {
        margin-top: -0.5rem;
        margin-bottom: 1.5rem;
    }
}

var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;

{{{link "See more..." story.url}}}
{{ true }}
{{ custom_helper 42 href="somepage.html" false }}

<?php
ECHO "Hello!<br>";
echo "Welcome to Developer News<br>";
EcHo "Enjoy all of the ad-free articles<br>";
// Assign the value "Hello!" to the variable "greeting"
$greeting = "Hello!";
// Assign the value 8 to the variable "month"
$month = 8;
// Assign the value 2019 to the variable "year"
$year = 2019;
?>

We also understand that all person or company do not write codes in same language. We included most common language support in this theme. But if you want to highlight code of another language which is not included in this theme then do not worry. You can add your language support very easily.

Go to Prism CDN provided by cdnjs.com and grab your language specific js file link with script tag.

In your Ghost admin dashboard go to "Code Injection" page and add that CDN link in the "Site Footer" box.

Or if you want to directly add that in the theme then got to prism download page and select all the languages you want. After that download the prism.js file and replace prism.js file in the development copy of your theme (assets/js/vendor/prism.js).