Özgür Özer

Junior full stack developer

Ghost'a Syntax Highlighter Kurmak

Bloğumuzda paylaştığımız kod öbeklerinin metin editörlerindeki gibi renkli olması kod okunabilirliği açısından son derece etkili bir özelliktir. Bugün basit ve hafif bir syntax highlighter olan Prism‘i Ghost’a kurup nasıl kullanacağımızı göreceğiz.

Prism’i Kurma

http://prismjs.com/download.html adresine gidiyoruz.

Temamızı ve kullanacağımız programlama dillerini seçtikten sonra alt bölümdeki DOWNLOAD JS ve DOWNLOAD CSS butonları yardımıyla prism.js ve prism.css dosyalarını indiriyoruz.

prism.js dosyasını ghost/content/themes/temaAdi/assets/js klasörüne,

prism.css dosyasını da ghost/content/themes/temaAdi/assets/css klasörüne kopyalıyoruz.

ghost/content/themes/temaAdi/default.hbs dosyasını açıyoruz.

</head> tag’i üzerindeki herhangi bir yere,

<link rel="stylesheet" href="{asset "css/prism.css"}">

</body> tag’i üzerindeki herhangi bir yere de bunu ekliyoruz.

<script src="{asset "js/prism.js"}"></script>

Prism’i Kullanma

Kodlarımızı normal bir şekilde 3 tırnak içerisine aldıktan sonra yanına programlama dilini yazmamız yeterli olacaktır.

Örnek

```programlamaDili
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>```

Çıktı

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
</body>
</html>

Desteklenen tüm diller için buraya tıklayabiliriz.