ソースコードを綺麗に表示。Luxeritasでシンタックスハイライターを使ってみよう!

ブログ管理Luxeritas, WordPress基本設定, シンタックスハイライター, ブログ管理, 初心者

SHヘッダー

トリ師匠
トリ師匠
最近サボってばっかいるみたいやな。そろそろ目ン玉ド突くで。

ぐず夫
ぐず夫
そんな冷静に言われるとドキュンと心に響くやないか。やめてーな。
トリ師匠
トリ師匠
前にそろそろCSSにふれてみよかて言ったけど、今回はせっかくやで、「そのコードをのっけるための準備」シンタックスハイライターの設定をしてみよか。

ということで、今回はLuxeritasのシンタックスハイライター機能を使用してソースコードを表示させてみたいと思います。

シンタックスハイライターって何?

SHて何?

ぐず夫
ぐず夫
「新田、はい、ライターよ」
なんやそれ、状況が特殊すぎへんか?

トリ師匠
トリ師匠
シンタックスハイライターな。簡単に言うと、ソースコードの種類や構文、属性や命令なんかを色分けして表示してくれるもんの総称みたいなもんや。
ぐず夫
ぐず夫
…一個も意味が分からへんわ。
ワシの耳が勝手に右から左へ受け流したで。
トリ師匠
トリ師匠
用語の意味なんて別に詳しく知らへんでもええわ。そんならお主、CSSのカスタマイズしてる時、参考にしたページでこんな表示してるの見たことないか?
表示例
有名なサルワカさんでの表示例
ぐず夫
ぐず夫
あー、なんや見たことあるな。「コード」っちゅう部分だけ、なんや別個で表示させてるページをいくつも見たことあるで。それがどないした?
トリ師匠
トリ師匠
ぐず夫はあまり分からへんかもしれんけど、実はソースコードはそのままWordPressの投稿画面に貼っつけると、HTMLのコードとして読まれたりして貼っつけた人の意図と違うように表示されることが多いんじゃ。
ぐず夫
ぐず夫
はぁ…、なんやよく知らんけど。そんで?
トリ師匠
トリ師匠
じゃから上でみたようなページは、わざわざ表示がおかしくならへんように、それぞれ一手間加えて見た目を変えてんねん
ぐず夫
ぐず夫
ふーん。それでどないやねん?
トリ師匠
トリ師匠
これからぐず夫もCSSのコードなんかをのっけることもあるやろで、今回はその「表示のやり方」を学んどこっちゅうことじゃ。
ぐず夫
ぐず夫
(面倒くさいのう…)
はいはい、分かったでさっさとやろか。

 

では早速使ってみよう!

早速使ってみよう!

トリ師匠
トリ師匠
で、改めてじゃが、今回はソースコードの表示にLuxeritasのシンタックスハイライター機能を使用するで。

ぐず夫
ぐず夫
なんや、また特別なもん入れるわけと違うんか。
トリ師匠
トリ師匠
そんな面倒なもん必要ないで。ちゃんとデフォルトで機能を入れてくれてるでの。(以下、Luxeritas Ver3.0.0~を対象に進めるで)
ぐず夫
ぐず夫
…ホンマに至れり尽くせりのテーマやな。ワシ、なんや怖なってきたで。
トリ師匠
トリ師匠
親切すぎるのは事実じゃの。
なら設定するで、一個ずつ見てみよか!

◆Luxeritasのアップデートはこちらを参照!

シンタックスハイライターの準備や!

トリ師匠
トリ師匠
まずはWordPressの管理画面から「Luxeritas」を選択し、「定型文登録」を選んでみよか。

定型文登録を選択

トリ師匠
トリ師匠
Luxeritasの定型文登録画面が表示されたら、「サンプル登録(ショートコード)」タブを選択じゃ。

サンプル登録タブ選択

トリ師匠
トリ師匠
するとここで「シンタックスハイライター」のショートコードを選択できるようになってるで、「のっけたいソースコードの種類」「CSS Theme」を選択するんじゃ。
コードの種類と表示の選択
「CSS」と「PHP」を選択し、見た目を選択
ぐず夫
ぐず夫
なんや沢山種類があるけど?
トリ師匠
トリ師匠
シンタックスハイライターじゃからの、言語別に表示させる形式が異なるんじゃ。ぐず夫の場合はせいぜい「CSS」と「PHP」くらいしか使わへんで、2つにチェック入れて、表示窓の選択をするとええで。ちなみに「CSS Theme」別の表示例は下のようなイメージじゃ。好きなの選んだってな。
Default
① Default表示例
Dark
② Dark表示例
Okaidia
③ Okaidia表示例
Twilight
④ Twilight表示例
Coy
⑤ Coy表示例
Solarized Light
⑥ Solarized Light表示例
Tomorrow Night
⑦ Tomorrow Night表示例
トリ師匠
トリ師匠
決まったら一番下へ移動して「変更を保存」を押して完了じゃ。

 

用意したら実際に表示させてみよう!

トリ師匠
トリ師匠
次は実践じゃ。まずは投稿画面へ移動じゃな。
ぐず夫
ぐず夫
なんや、いつもの画面やないか。これがどないしたんや。
トリ師匠
トリ師匠
そんじゃワシが表示用のコードを下に準備したで、実際に貼っつけてみよか。ちなみにWordPress5.0以降じゃと投稿エディタがGutenbergになってる関係で、使用方法が一部異なるから注意してな。でもLuxeritasのバージョンが3.4.1以降じゃと、「クラシックのブロック」挿入で同じように使えるで心配いらへんよ
/*使用したソースコード*/
.post h2 {
border-left:0 none;
}
トリ師匠
トリ師匠
なら「ビジュアルエディタ」を選択して、投稿欄に上のソースコードを貼ってみるで。

コード貼り付け例

トリ師匠
トリ師匠
そしたら次はコードを全部選択じゃ

コードを全文選択

トリ師匠
トリ師匠
選択した状態のまま、ショートコードのアイコンをクリックすると、先程追加したショートコードが表示されるんじゃ。このコードはCSSのコードやで、「CSS」を選択してみよか。
ショートコードを選択
ショートコードを選択し…
CSSを選択
CSSを選択
ぐず夫
ぐず夫
なんや前後にちょろっと英語の羅列が表示されたの。
トリ師匠
トリ師匠
せや。この羅列で囲われた部分を「CSSのコードやで」て認識してくれるようになるんじゃ。

ショートコード挿入

ぐず夫
ぐず夫
こんなことでか?
原理が分からへんわ。
トリ師匠
トリ師匠
なら実際にプレビューで見てみるとええわ。

プレビュー例

ぐず夫
ぐず夫
おおぅふ!
お、驚きやで。なんもしてへんのに…
トリ師匠
トリ師匠
こんな感じで表示されるで。どや、簡単じゃったやろ?
ぐず夫
ぐず夫
簡単すぎて漏らしそうやで、ホンマに…
トリ師匠
トリ師匠
ちなみにテキストエディタでも同じことができるでやってみてな。コードを同じように全部選択して、「ショートコード」ボタンから「CSS」を選択してやればOKじゃから、便利やで利用させてもらうとええで。

 

コードを貼っ付ける準備もできました

トリ師匠
トリ師匠
これでCSSのコード貼っ付けるのも自由自在じゃな。
ぐず夫
ぐず夫
(面倒なことを…)
でもCSSなんてワシ分からへんで、まだまだサッパリ先の話やで。
トリ師匠
トリ師匠
分からへんなら分かるようにすりゃええんじゃ。勉強しぃ、勉強を。
ぐず夫
ぐず夫
勉強できてたらこんな生活してへんわ!
馬鹿にすなよトリ!
カネコ
カネコ
し、しびれる言葉や。
心にジーンと響いたで、ぐず夫!
トリ師匠
トリ師匠
(…もう勝手にしてくれ)

以上でシンタックスハイライターの設定を終了します。

ではまた次回!