JavaScript

【Prism.js】シンタックスハイライト表示

2024.11.06 2024.11.08

1．準備
2．「Prism.js」の設置
3．シンタックスハイライトの設定
- ファイル名: index.html
デモ
参考URL

1．準備

Prism.jsでシンタックスハイライトを設定するためには、いくつかの準備が必要です。以下を確認してください。

＜前提条件＞
・FTPソフトが使用できること
サーバー上にファイルをアップロードするため、FTPソフトでファイルの作成や編集が行える環境が整っていることが必要です。

＜必要な情報＞
・Prism.jsのJavaScriptライブラリー
シンタックスハイライト機能を提供するJavaScriptライブラリー「Prism.js」をダウンロードします。

・HTMLタグや特殊文字の変換が必要な場合がある
ソースコードをHTML内で表示する際、特殊文字（例：<や>）が意図せず変換されてしまう場合があります。そのため、HTML特殊文字変換ツールが役立ちます。

2．「Prism.js」の設置

１．Prism.jsのダウンロード
Prism.jsの公式サイトや配布元から以下のファイルをダウンロードしてください：

prism.js（JavaScriptファイル）
prism.css（スタイルシート）

２．ファイルのアップロード
ダウンロードしたファイルをサーバーの指定ディレクトリにアップロードします。ここでは、/program/prism/ディレクトリ内に配置することを想定しています。

3．シンタックスハイライトの設定

Prism.jsを利用してさまざまなコードを表示するためのHTMLファイルを作成します。以下のコードをコピーして、index.htmlとして保存し、サーバーにアップロードしてください。このHTMLファイルでは、PHP、HTML、CSS、JavaScript、.htaccess、Bash、JSON、SASS、SQLのコードがハイライト表示されます。

ファイル名: `index.html`

<html lang="ja">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>【Prism.js】シンタックスハイライト表示（デモ用）</title>
    <link rel="stylesheet" href="/program/prism/prism.css">
    <script src="/program/prism/prism.js" defer></script>
</head>

<body>
    <h3>【Prism.js】シンタックスハイライト表示（デモ用）</h3>

<h3>PHP表示</h3>
<pre data-label="index.php" class="line-numbers">
<code class="language-php">&lt;?php
phpinfo();</code>
</pre>

<br><br>

<h3>HTML表示</h3>
<pre data-label="index.html" class="line-numbers">
<code class="language-html">&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    
&lt;/body&gt;
&lt;/html&gt;</code>
</pre>

<br><br>

<h3>CSS表示</h3>
<pre data-label="style.css" class="line-numbers">
<code class="language-css">* {
    color: #222;
}</code>
</pre>

<br><br>

<h3>JavaScript表示</h3>
<pre data-label="index.js" class="line-numbers">
<code class="language-markup">document.write("&lt;p&gt;JavaScript テスト&lt;/p&gt;");</code>
</pre>

<br><br>

<h3>.htaccess表示</h3>
<pre data-label=".htaccess" class="line-numbers">
<code class="language-markup">## https / wwwあり
&lt;IfModule mod_rewrite.c&gt;
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    RewriteCond %{HTTP_HOST} !^www\. [NC]
    RewriteRule .* https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
&lt;/IfModule&gt;</code>
</pre>

<br><br>

<h3>Bash表示</h3>
<pre class="line-numbers">
<code class="language-bash">$ ping google.com</code>
</pre>

<br><br>

<h3>JSON表示</h3>
<pre class="line-numbers">
<code class="language-json">{
    "name": "Tanaka",
    "age": 26
}</code>
</pre>

<br><br>

<h3>SASS表示</h3>
<pre class="line-numbers">
<code class="language-sass">$black: #000000;
$position: left;
    
.item1 {
    color: $black;
    width: 100px;
    &:hover {
        width: 50px;
    }
}

.item2 {
    background: $black;
    margin-#{$position}: 30px;
}

.box {
    &_a {
        background: #ffffff;
    }
    &_b {
        background: #000000;
    }
}</code>
</pre>

<br><br>

<h3>SQL表示</h3>
<pre class="line-numbers">
<code class="language-sql">show processlist;</code>
</pre>

<br><br>

</body>
</html>

このコードをアップロード後、ブラウザでindex.htmlにアクセスすると、Prism.jsが適用されたシンタックスハイライトが確認できるはずです。

デモ

コチラ

参考URL

https://qiita.com/taqumo/items/825c862517ba9d8567a1

デモの不具合や質問等の連絡はお問い合わせページからお願いします。

【Cookie Consent】Cookie（クッキー）利用の同意バナー設置

AE（After Effects）で作ったアニメーションをBodymovinでWebに書き出す

【Prism.js】シンタックスハイライト表示

1．準備

2．「Prism.js」の設置

3．シンタックスハイライトの設定

ファイル名: `index.html`

デモ

参考URL

最近の記事

技術投稿

【Prism.js】シンタックスハイライト表示

1．準備

2．「Prism.js」の設置

3．シンタックスハイライトの設定

ファイル名: index.html

デモ

参考URL

最近の記事

技術投稿

ファイル名: `index.html`