Code-Highlight with prism.js

Ankiにprism.jsを入れる #

Prism.jsを利用してAnkiで次のようなコードハイライトを実現する。

Prismの公式サイトにアクセスして「Download」ボタンを押す。

prism-1

次に利用する言語やテーマ、プラグインの選択を行う。

  • Compression level : Minified versionをチェック
  • Themes : 好きなハイライトテーマを選択
  • Languages : Select/unselect all をチェックしてすべての言語のチェックを入れる

好きなプラグインにチェックを入れる。自分の場合には次のプラグインにチェックした。

  • Line Numbers
  • Autolinker
  • Show Language
  • Normalizze White-space
  • Autoloader
  • Toolbar
  • Copy to Clipboard
  • Dif Highlight
  • Treeview
  • Match Braces

「DOWNLOAD JS」と「DOWNLOAD CSS」をクリックしてprism.jsprism.cssをダウンロードする。

Ankiにデータを消されないように名前の頭にアンダーバーをつけて_prisim.js_prism.cssとリネームする。

Ankiを閉じた状態で/Users/User_Name/Library/Application Support/Anki2/Profile_Name/collection.mediaにその2つのファイルをペーストする。

Ankiを起動して使用するノートタイプを編集する。

カードタイプの編集画面で次のコードを適当な場所に追記する。これでコードハイライトが実現する。

<link type="text/css" href="_prism.css" rel="stylesheet" />
<script async type="text/javascript" src="_prism.js" charset="utf-8"></script>

フィールドに次のコードを書く。language-xxxxのxxxxにはなんの言語か指定する。JavaScriptならlanguage-jsとする。

<pre class="language-xxxx"><code>
コード
</code></pre>

xxxxの部分は次から確認できる


Meta #

links: [[Anki MOC|Anki]] | [[HTML, CSS, SCSS, Javascript MOC|Javascript]] srcs: url: https://www.ankiyorihajimeyo.com/anki/prism_codehighlight_into_anki/ type: #type-hugo tags: #anki | #Javascript | #プログラミング