Python シンタックスハイライター prism.js prism.css

コードのマークアップのためのスタイルシートを探していたマスターU(@Udemy11)です。

Python学習を始めてから、サイトにコードを記述することが増えました。

Python学習をはじめた頃は、よくわからないまま、記事中のコードの表示にdiv要素などを使っていたのですが、ある時<code>タグと<pre>タグなんてものがあることを知りました。

その後、Pythonのことをネットで調べていると、どうもコードの記述様式的なものが特別にあることに気づいて、それらの記事のソースを見たりしてCSSをいじったりしていたのですが、どうもうまく表示されていなかったんです。

一番の問題は、パソコン上ではCSSで指定したとおり、きちんと表示されるにも関わらず、iPhoneではコードの表示がおかしくなることでした。

なので、同じような様式のサイトのソースを見比べたり、ネットでその原因を調べてみたりした結果、Webサイトでのコードマークアップ専用のJavescriptとCSSがあるらしいということや無料で配布するサイトがあるということにたどり着きました。

そこで見つけたのが、Prism Syntax Highlighterです。

今日は、そんな便利なコードマークアップ用JavaScriptとCSSのセットPrism Syntax Highlighterを紹介します。

prism.jsとは

Web上でソースコードを見やすくしてくれるのがシンタックスハイライター(Syntax Highlighter)です。

最初からこの【シンタックスハイライター(Syntax Highlighter)】という名前を知っていれば、こんなに悩むことはなかったわけですが、いろいろと調べたおかけで、軽くて超簡単で高機能なPrism Syntax Highlighterに出会うことができました。

WordPressのプラグインにもいろいろな【シンタックスハイライター】があるんだろうなとは思うのですが、導入するプラグインが多くなってしまうとコンクリフトを起こしたり、動作が重くなったりするので、できるだけ使うプラグインを増やしたくなかったんです。

【Prism Syntax Highlighter】は、無料で使えて、使いたいと思っている機能がついたJavaScriptとCSSが簡単に生成できて、導入も簡単、さらに問題だったiPhoneでの表示も問題ないので、わけがわからないまま導入することを決めました。

Prism.jsの使い方

ということで超便利な【Prism Syntax Highlighter】の使い方を紹介していこうと思います。

私のサイトは、WordPressでテンプレートに賢威7を使っていますが、作業としては次のような工程が必要でした。

  • prism.jsprism.cssのダウンロード
  • prism.jsprism.cssをアップロード
  • ヘッダにprism.jsprism.cssを参照するコードの追加
  • prism.cssでカラーをカスタマイズ
  • preタグとcodeタグにクラスを指定
  • それでは、実際に行った作業を順番に解説していきたいと思います。

    prism.comからファイルをダウンロード

    Python シンタックスハイライター prism.js

    まずは、下記サイトにアクセスして、prism.jsprism.cssをダウンロードします。

    上部右側の【Download】ボタンをクリックして移動するページで、ダウンロードするテーマと言語、プラグインを選びます。

    Prism Syntax Highlighter テーマ

    デベロッパーではないので、Minified versionにチェックを入れて、テーマはPythonista
    で使っているカラーに近くてあとからカスタマイズするのが少なくて済みそうなOkaidiaを選びました。

    テーマは次のような感じです。

    Default

    Prism Syntax Highlighter テーマ デフォルト

    Dark

    Prism Syntax Highlighter テーマ ダーク

    Funky

    Prism Syntax Highlighter テーマ funcky

    Okaidia

    Prism Syntax Highlighter テーマ Okaidia

    Twilight

    Prism Syntax Highlighter テーマ twilightテーマ

    Coy

    Prism Syntax Highlighter coy テーマ

    Solarized Light

    Prism Syntax Highlighter テーマ Solarised light

    Tomorrow Night

    Prism Syntax Highlighter テーマ Tomorrow Night

    テーマを選んだら次は言語です。

    デフォルトで次の言語がチェックされているので、私の場合はPythonをプラスしました。

    • Markup + HTML + XML + SVG + MathML
    • CSS
    • C-like
    • JavaScript

    Prism Syntax Highlighter 言語 Python

    次にプラグインを選びます。

    行番号が表示できるLine Numbersと行をハイライト表示ができるLine Highlight、コードをクリップボードにコピーができるToolbarCopy to Clipboard Buttonを選びました。

    Prism Syntax Highlighter プラグイン Python

    あとは【DOWNLOAD JS】ボタンと【DOWNLOAD CSS】ボタンをクリックして、prism.jsとprism.cssをダウンロードします。

    Prism Syntax Highlighter テーマ Okaidia ダウンロード

    サイトにファイルをアップロード

    ファイルをダウンロードしたら、次はサイトにファイルをアップロードします。

    マークアップされるカラーを変更したい場合は、この時点で、CSSをカスタマイズしても構いませんが、実際の表示をみながら変更したほうが思ったようなデザインになるので、私はファイルを先にアップロードしてから直接ファイルをいじりました。

    WordPressを使っている人なら、普通にアップロードできると思いますのでFTPの使い方やWebツールからのアップロード方法は割愛しますが、重要なのは、アップロードしたprism.jsとprism.cssのフルパス(例:https://udemyfun.com/js/prism.js)をチェックしておくことです。

    仮にサイト直下にアップロードしたとすると、

    • https://udemyfun.com/prism.js
    • https://udemyfun.com/prism.css

    になるので、WordPressのヘッダに、これらのファイルを読み込むコードを追加することになります。

    ヘッダにコードを追加

    私はWordPressのテーマに賢威7を使っているので、【賢威の設定】からヘッダにコードを追加します。

    Prism Syntax Highlighter WordPress インストール

    ダッシュボードから【賢威の設定】をクリックするとヘッダにコードを追加できる項目があるので、その中に次のコードを追加します。

    <link rel="stylesheet" href="https://udemyfun.com/prism.css" />
    <script src="https://udemyfun.com/prism.js"></script>

    Prism Syntax Highlighter WordPress インストール

    https://udemyfun.com/prism.js
    https://udemyfun.com/prism.css
    の部分は、自分のサイトのフルパスに変えてください。
    ※相対参照でも大丈夫なようですが、私の場合、どうもjsファイルを読み込んでくれていなかった様子だったので、フルパスにしました。

    また、賢威にはヘッダーにコードを書き込む機能がありますが、テーマエディタで直接ヘッダーファイルに追加する方法もあります。
    ただ、直接システムファイルを触ることになるので、バックアップをきちんと取ってから変更するようにしましょう!

    ここまでできれば、準備は完了です。

    ソースコードの書き方

    あとは、クラスを指定してpreタグとcodeタグで囲むだけです。

    例えばPythonのコードの書き方は次のとおりです。

    <pre>
    <code class="language-python">
    
    ここにコードを書く
    
    </code>
    </pre>

    codeタグにclass="language-言語名"を指定して、コードを囲み、さらにpreタグで囲みます。

    私が記述する言語はほぼPythonですが、HTMLの場合だけhtmlじゃなくて、markupになります。

    スタイルシートをカスタマイズ

    ここまでできれば完了ですが、このまま使うと、他の人と丸かぶりになるので、私はPythonistaで使っているカラーと同じような感じの色合いになるようにprism.cssを少しだけいじって色を変更しています。

    Python prism.cssの変更

    FTPソフトは【Cyberduck】を使っているのですが、アップロードしたprism.cssを直接編集して、色合いを確認しながら、気に入った色に変更しました。

    現状の色設定でPythonのコードを表示するとこんな感じです。

    def print_info(func):
    	def wrapper(*args, **kwargs):
    		print('Start')
    		result = func(*args, **kwargs)
    		print('End')
    		return result
    	return wrapper
    	
    def add_num(a, b):
    	return a - b
    	
    p = print_info(add_num)
    r = p(10, 20)
    print(r)

    preタグにもクラスを指定してハイライト

    チェックしたプラグインはそれぞれのプラグイン名のリンクから使い方を確認することができます。

    Python prism.css プラグインの使い方

    これはLine Numbersの使い方ですが、基本はpreタグのクラスにline-numbersを追加すれば、自動的に行に番号が振られます。

    あと行をハイライトするLine Highlightは、data-line="行指定(2, 4-5など)"preタグに追加すれば、指定した行をハイライトすることができます。

    <pre class="line-numbers" data-line="4">
    <code class="language-python">
    
    コード
    
    </code>
    </pre>

    もう一つCopy to Clipboard Buttonを入れていますが、こちらは自動的に表示されるので、特別にクラスなどを追加する必要はなく、マウスがロールオーバーしたときに、右上にCopyボタンが表示されます。

    コード内の<>は注意が必要

    preタグとcodeタグは、コード表示用なので、改行やスペースも見た目同様の表示ができますが、<>は、そのまま使うと思ってもみないレイアウトの崩れにつながってしまいます。

    なので、<>を表記するときは、それぞれ【&lt;】と【&gt;】と記述します。(【】は不要)

    あと便利な使い方としては、コードを単語登録しておく方法がおすすめです。

    例えば私はGoogle日本語入力を使っていますが、行ナンバーが振られたPythonコードをよく使うので、【ぱ(pa)】と入力して<pre class="line-numbers"><code class="language-python">に変換できるように、単語登録しています。

    Google日本語入力 単語登録

    他にもタグ入力が短縮できるように、いろいろと単語登録して、文書の作成スピードを上げるようにしています。

    ただ、WordPressは、ブロックエディターに移行しているので、そちらも使えるようにならないといけないな〜と思いつつも、クラシックエディターで記事を書いている自分がいます。

    タグなどを考えなくてもいいので、ブロックエディターのほうが便利かもしれませんが、なかなか変える気になんないんですよね〜。

    ということで、今回は【Prism Syntax Highlighter】でソースコードの表示をおしゃれにする方法を紹介しましたが、HTMLのソースやPythonのコードをサイトで紹介する場合は、必要不可欠なアイテムですので、何を使ったらいいのか悩んでいる方は、ぜひ【Prism Syntax Highlighter】を導入してみてください。

    間違いなくおしゃれで引き締まったサイトになること間違いなしです。