Joomla!, Microsoft Word, etc.

Joomla!

Prism.js 導入

Details
Written by: fuku-chang
Category: Joomla!
Prism.js

Joomla!! Template CassiopeiaにシンタックスハイライトのPrism.jsを導入します。

 Summary

  • シンタックスハイライトについては、既にgoogle-code-prettifyを導入しておりますが、試しにPrism.jsも導入してみます
  • PrismのWebサイトから好みのjsを選択してオリジナルのjsを作成することができますが、今回は簡便なCDNによる導入を試します
  • なお、JCEにはCode SampleというPluginが用意されており、こちらを使用すれば、以下に案内の方法より簡便に導入することができるかもしれません

Setup

Basic usage

  • 公式サイトに従い、CDNによる導入を行います
    • jsはbody要素の最後にscript要素で指定します
    • cssはhead要素にlink要素で指定します
  • 当サイトでは、コアに加え次のプラグインとテーマを追加しています
    • コア
      • prism : コアファイルです
      • autoloader : 必要な言語ファイルをロードします
    • プラグイン
      • toolbar : 次のshow-languageとcopy-to-clipboardに必要です
      • show-language : 指定言語を表示します
      • copy-to-clipboard : クリップボードへコピーするボタンを用意します
      • line-numbers : 行番号を表示します
      • line-highlight : 指定する行をハイライト表示します
    • テーマ
      • prism : コアテーマ(?)です
      • okaidia : ダーク系のテーマです
  • なお、コアも含め、多くのプラグインがcssとセットになっています
    • いずれも、ファイル名にminを含む最小化(圧縮?)タイプを選択しています

JSDELIVR

  1. 必要なコア、プラグイン、テーマのリンクをたどり、下の図のようにURLを取得します
    How to Copy URL at JSDELIVR
  2. 取得したURLをjsであればscript要素のsrc属性に、cssであればlink要素のrel属性に指定します

Joomla! Template Setup

index.php

  • 上記で取得したURLをもとに、CassiopeiaのChild Templateのindex.phpに次のように追記します
    • System > Site Templates > Cassiopeia_child Details and FIles (child) > Editor > index.php
js
  • script要素はbody要素の最後に配置します
  <body>
    ---
    <!-- prism.js -->
    <!-- core -->
    <script src="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/prism.min.js"></script>
    <!-- language autoloader -->
    <script src="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/plugins/autoloader/prism-autoloader.min.js"></script>
    <!-- toolbar -->
    <script src="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/plugins/toolbar/prism-toolbar.min.js"></script>
    <!-- show-language -->
    <script src="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/plugins/show-language/prism-show-language.min.js"></script>
    <!-- copy-to-clipboard -->
    <script src="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script>
    <!-- line-numbers -->
    <script src="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!--line-highlight -->
    <script src="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/plugins/line-highlight/prism-line-highlight.min.js"></script>
  </body>
css
  • link要素はhead要素内に配置します
  <head>
    ---
    <!-- prism.js -->
    <!-- core css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/themes/prism.min.css">
    <!-- line-numbers css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/plugins/line-numbers/prism-line-numbers.min.css">
    <!-- toolbar css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/plugins/toolbar/prism-toolbar.min.css">
    <!-- line-highlight css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/plugins/line-highlight/prism-line-highlight.min.css">
    <!-- okaidia css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/This email address is being protected from spambots. You need JavaScript enabled to view it..0/themes/prism-okaidia.min.css">
  </head>

user.css

  • 上記セットアップ直後では、間延びした行間になってしまいました
    • 行番号ともずれてしまっています 
    • chromeのデベロッパーツールで確認しました
      google developer tools
      • Cassiopeiaの親templateのtemplate.min.cssにクラスtagに対してpadding: 0.5rem 0.5rem 0.5rem 0;の指定がありました
      • このため、<や>のタグに対して、上下右に0.5rem相当の8pxが余白指定されてしまっています
  • そこで、CassiopeiaのChild Templateのuser.cssに次のように追記しました
    • pre要素下のcode要素下のすべてにpadding: 0 !important;を指定して上書きしています
    • System > Site Templates > Cassiopeia_child Details and FIles (child) > Editor > user.css
/* prism.js */
pre code * {
  padding: 0 !important;
}

Reference