Prism.jsを利用する

設定方法

公式サイトで解説されているので特に難しいことはない。

A complete guide to code samples in Ghost
Ghost Tutorials: Discover how to add syntax highlighting to your code blocks when writing in the Ghost editor.

確認

「```」を入力するとソースコードを入力するモードになりますので適当に入力して色が付いたか確認してみます。

  • ソースの種類が「html」の場合
<!-- link tag -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism.min.css" />

<!-- script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script>
  • ソースの種類が「javascript」の場合
        // Parse the URL parameter
        function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }