DrupalでGoogle Code-Prettifyを使う

1つ前の記事で、サンプルソースを貼ったものの、色分けされておらず読みにくいと思い、ググったところ、「Google Code-Prettify」の記事を見つけました。

「Adding stylesheets (CSS) and JavaScript (JS) to a Drupal theme」にJavaScriptの追加方法が載っていますが、「Policy on 3rd party assets on Drupal.org」によると外部のJavaScriptを使用するのは推奨されていません。「strongly discouraged」とのことです。。パフォーマンスやセキュリティ上の理由とのことです。

Google Code-Prettifyをダウンロードして使用する方法も上記の記事に載っているのですが、少し面倒そうなので、今回はDrupal的には推奨されていない外部のJavaScriptを使用する方法で設定します。

libraries.ymlへの指定

「Adding stylesheets (CSS) and JavaScript (JS) to a Drupal theme」には、外部のJavaScriptを使用する例として、以下のように記述されています。

angular.angularjs:
  remote: https://github.com/angular
  version: 1.4.4
  license:
    name: MIT
    url: https://github.com/angular/angular.js/blob/master/LICENSE
    gpl-compatible: true
  js:
    https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js: { type: external, minified: true }

とても長く、ほとんど不要と判断し、このサイト用のdrupal_study.libraries.ymlには、以下の設定のみを追記しました。

google_code_prettify:
  js:
    https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js: { type: external, minified: true }

ライブラリ名を「google_code_prettify」とし、「js:」のところに、Google Code-PrettifyのURLと「{ type: external, minified: true }」を記述しています。

ちなみに、「Google Code-Prettify」について検索すると「cdn.rawgit.com」を使用している記事が多く見つかりますが、「Google Code-Prettify」の記事によると、「2019年10月には今まで提供されていた RawGit の CDN（cdn.rawgit.com）は終了し、上記の cdn.jsdelivr.net に変更になっています」とのことです。

Twig templateへの指定

すべてのページで使用する場合は、libraries.ymlの「global-scripts:」にJavaScriptを指定すれば良いようですが、今回は、コンテンツタイプ「blog」の場合のみ、上記のJavaScriptを読み込む事にします。そのため、以下の「node--blog.html.twig」にライブラリの読み込みの指定を行います。

themes/
└──  drupal_study/
     └── templates/
         └── content/
             └── node--blog.html.twig

node--blog.html.twigに、以下のように attach_library() を記述することによりライブラリを使用することができます。attach_library() の引数として、'テーマ名/ライブラリ名'を指定します。

{%
  set classes = [
    'node',
    'node--type-' ~ node.bundle|clean_class,
    node.isPromoted() ? 'node--promoted',
    node.isSticky() ? 'node--sticky',
    not node.isPublished() ? 'node--unpublished',
    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
  ]
%}
{{ attach_library('classy/node') }}
{{ attach_library('drupal_study/google_code_prettify') }}
<article{{ attributes.addClass(classes) }}>

phpのコードへの適用例

phpのコードに対してこれを適用した例は、１つ前の以下の記事となります。