ソースコードのハイライト機能をもつPrism.jsの実装方法です。highlight.jsの代わりに利用できてWordPressでも使えます。 プログラムのソースコードをサイトに表示するのに、今一番おすすめするJavaScriptプラグインです。
highlight.jsは、シンプルで軽量なシンタックスハイライターです。ソースコードを見やすく装飾してくれるスクリプトです。 WordPressでは、一時期 Crayon Syntax Highlighterが人気でしたが、読み込みが遅く、さらに表示処理に時間がかかるということが分かり、highlight.jsへ乗り換える人が増えています。 この記事では、Wordpressへスマートに導入する方法を紹介します。 概要 highlight.jsのハイライト機能は必要なものに絞られており、とても軽量です。 一方、デザインは豊富で、77のスタイルから選ぶことが出来ます。 デモ: https://highlightjs.org/static/demo/ 導入方法 このシンタックスハイライト機能は、Javascript + CSSで実現されています。 WordPressに導入するには、次のように、
ソースコードをハイライトするプラグインが邪魔! ということで、Googleさんの指示に従って、 画像の圧縮レンダリングをブロックしているコードを削除(移動) などの対応をしてみたんですが、やっぱり、こいつが邪魔をするんですよね…! 「Crayon Syntax Highlighter」 ソースコードをハイライトして見やすくしてくれるWordPressプラグインなんですが、機能が豊富なので、たくさんコードを吐き出すんです。。 前からわかっていたものの、面倒だったので、これといった対策もしていなかったんですが…もう我慢ならん! 代替案:highlight.js …とはいえ、これといってめぼしいWordPressプラグインがないのが困ったところ。 1番使い勝手が良さそうなプラグインも、プラグイン自体のバグなのか、WordPress4.7と相性が悪いのかわかりませんが、全く使い物になりませんでした
WordPress Twenty Seventeen Crayon Syntax Highlighterから highlight.jsへの移行 「Crayon Syntax Highlighter」プラグインを長年に亘り使用してきたが、ここに来てバグが顕在化してきたり、サイトのスピードアップの弊害になってきたので、思い切って代替策を検討することにした。
192 languages and 496 themesAutomatic language detectionWorks with any HTML markupZero dependenciesCompatible with any JS frameworkSupports Node.js and DenoCurrent release: 11.9.0 #!/bin/bash ###### CONFIG ACCEPTED_HOSTS="/root/.hag_accepted.conf" BE_VERBOSE=false if [ "$UID" -ne 0 ] then echo "Superuser rights required" exit 2 fi genApacheConf(){ echo -e "# Host ${HOME_DIR}$1/$2 :" } echo '"quote
Highlight.js の使い方 highlight.js は HTML にソースコードを表示するとき、キーワードなどを強調表示するための JavaScript ライブラリです。特徴ですが、 対応言語が多い(この種のライブラリでは一番多い!?) パレットが豊富 設置が簡単 です。 参考:コードのハイライト表示用 JS ライブラリ 3種 highlight.js のサイト 設置 (1) インターネットに接続できる場合 インターネットに接続できる場合は、次のようにすれば highlight.js をダウンロードしてウェブサーバにインストールする手間が省けます。この文書を書いたときの URL はバージョンが 8.6 ですが、 highlight.js のバージョンなので必要に応じて変更します。2019/10の時点で最新は 9.15.10 になっています。 パレット default.min.cs
WEBデザインやプログラムなど、技術系のブログ記事を書いていると、“ソースコード”をどのような見た目で書くか悩むことがあると思います。 普通の文章と同じようにソースコードを書いてしまったら読みづらくてしょうがないです。 ソースコードを色分けすることを“シンタックスハイライト”と言いますが、これを実現してくれるWordPressのプラグインがいくつかあります。 しかし、WordPressが5.0(Gutenberg)にバージョンアップしたときに「Crayon Syntax Highlighter」というプラグインが使えなくなってしまったことをきっかけに、プラグインに頼るのが不安になりました。 そこで、プラグインを使わずに、「highlight.js」というJavaScriptライブラリを使って“シンタックスハイライト”をすることにしました。 highlight.js の使い方 まずはWord
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く