[ハイライト.js]WordPressでソースコード(プログラム)を書く。色々なスタイルが選べるhighlight.jsの導入方法！オフラインでも使用できます。

2024年8月31日

どうも、だらはです。

今回はWordPressでソースコードを格好良く書く方法を紹介します。

具体的には『highlight.js』を使います。

※オフラインでも使用できます。

◆『highlight.js』の使用例


using UnityEngine;

[CreateAssetMenu(menuName = "BoidFish/ParamFish")]
public class ParamFish : ScriptableObject
{
    public float initSpeed = 2f;
    public float minSpeed = 2f;
    public float maxSpeed = 5f;
    public float neighborDistance = 1f;
    public float neighborFov = 90f;
    public float separationWeight = 5f;
    public float wallDistance = 3f;
    public float wallWeight = 1f;
    public float alignmentWeight = 2f;
    public float cohesionWeight = 3f;
}

導入手順

①『highlight.js』の公式HPから、カスタムパッケージをダウンロード

『highlight.js』の公式HPにアクセスし、カスタムパッケージを選択します。

必要な言語を選択して、この下部にあるボタンから、カスタムパッケージをダウンロードをします。

②ダウンロードしたファイルをHPのサーバに保存

次は、ダウンロードした『highlight.zip』ファイルを解凍します。

その中から、『highlight.pack.js』と、『styles』フォルダの中身をご自身のHPサーバに保存します。

上記の格納先はどこでも良いです。

例えば、wordpressを使われている方は、『content』フォルダ直下に新たにフォルダを作成しても良いと思います。

◆保存先の例

ホームページのアドレス/wp-content/download_ori/highlightjs

③HPのヘッダーに追記

『highlight.js』のパッケージの準備ができたところで、次はそれを使えるようにしていきます。

ご自身のHPのヘッダー部に以下のコードを追記します。

<link rel="stylesheet" href="XXX/default.css">
<script src="XXX/highlight.pack.js"></script>

『XXX』の部分は、②で作成したフォルダパスに置き換えてください。

また同時に、『default.css』と『highlight.pack.js』ファイルがサーバに保存されていることを確認してください。

使い方

上記③手順が完了したら、もう準備は完了です。

埋め込みたいコードを以下で囲むだけです。

<pre><code class="language-csharp">
<-- 自由記述 -->
</code></pre>

上記はC#言語での記述の場合ですが、htmlやphpなどと書けばその言語に対応可能です。

※HTML書いたけど表示されない場合の解決方法

WordPressの仕様で、HTMLを書く場合は<code><pre>で囲っても表示されないようです。

ビジュアルエディターに切り替えてコードを張り付けてから、テキストエディタに切り替えて<code><pre>で囲えば解決します。

最後に

いかがでしたでしょうか。

今回はソースコードをHPで格好良く書く方法をまとめました。

ご不明点等ありましたら、是非コメントください！

Posted by だらは