Programming

【prism.js】ブログ記事にソースコードをきれいに表示する方法

Published: 2018/07/05
JavaScript

技術系ブログだと記事にプログラムの説明はつきもの。 今回はブログ記事にソースコードを綺麗に表示させる方法の紹介です。

基本の書き方:preタグとcodeタグを使う

codeタグ→プログラムの記述

<code>ここにコードを記述する</code>

codeはプログラムのソースコードですよという意味のタグ。 このタグで挟んだ文章は、等幅のフォントで表示してくれます。

preタグ→改行などインデントをそのまま表示する

preformed text(整形済みテキスト)というらしい。 このタグを使うと、改行やスペース、インデントなど、そのまま表示されます。

<pre>ここに記述するよ</pre>

preとcodeを合わせて、複数行のプログラムを表示する

実際に使うときにはpreとcodeで挟めばOK。

<pre>
    <code>ここにプログラムを記述する</code>
</pre>

なお、「>」「<」「&」などはHTMLタグと区別するために、エスケープ文字に変換します。(WordPressのビジュアルエディタ は自動で変換してくれるので、気にしなくてOK)

ブログの記事にはこうかくと、実際にはブラウザ上にはHTMLのコードが表示されます。

<div class="links">
    <h4>Links</h4>
    <ul class="footer-links">
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

ソースコードをキレイに見せるサービス&ツール

このままだと文字がべたっと並んでいるだけ。もうちょっと読みやすくしたいですよね。

オンラインサービス:CodePenを使う

HTML、CSS、JavaScriptなどマークアップ系のコードであればCodePenもおすすめ。 ブラウザ上で作成したコードを記事にそのまま貼り付けることができます。

Prism(コードフォーマット用JSライブラリ)を使う

ソースコード全般を読みやすくするには、Prismがおすすめ。 行数やコードの色分けをしてくれます。

<div class="links">
    <h4>Links</h4>
    <ul class="footer-links">
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

cssやjavascriptをホームページで使ったことがある人におすすめです。

①prism.cssとprism.jsをダウンロードして、テーマフォルダ内に配置する

 テーマフォルダ
 ┗ CSS
 ┗ prism.css
 ┗ JS
 ┗ prism.js

②CSSファイルとJSファイルを読み込む

の中で、prism.cssを読み込むコードを入れる。
<link href="<?php echo get\_stylesheet\_directory\_uri(); ?>/css/prism.css" rel="stylesheet">
タグの直前で、prism.jsを読み込むコードを入れる。
<script src="<?php echo get\_stylesheet\_directory\_uri(); ?>/js/prism.js"></script>

WordPressでは、使っているテーマフォルダのURLを指定します。 テーマフォルダのURLについて

③記事内では、preとcodeのクラスで表示方法を設定する

codeのクラスにlanguage-〇〇とプログラミング言語名を指定します。 また、preのクラスにはline-numbersを書いて行数を表示させます。

<pre class="line-numbers"> <code class="language-markup"> 〜〜 </code></pre>

preクラスにdata-start=3などと入れると、表示される行数が3行目から表示されるようになります。

【参考記事】【JS】シンタックスハイライトPrism.jsの使い方


Written by Emi

マイペースにWebサイトやWebアプリの制作をしています