備忘録_18 / Word Press_09
[図_1]
プログラムコードを記事内で見やすく表示してくれるプラグインです。プログラマーの方がご自身のホームページ上でこういったツールを使っているところをよく見かけますよね。実は私もそれに倣って見よう見まねで使い始めてみました。
＂できる奴＂と思わせる素敵なプラグインです。
■ シンタックス・ハイライターとは？
register_block_style(
'core/image',
[
'name' => 'roundb',
'label' => '角丸２',
'inline_style' => '.wp-block-image.is-style-roundb img { border-radius: 20px; }',
]
);
前回の投稿記事でも使っていましたが、＂Enlighter – Customizable Syntax Highlighter＂は上記の様に記事の中でソースコードを崩れることなくスタイリッシュに表示させてくれるプラグインです。
他にもう一つ定番として真っ先に挙げられるシンタックス・ハイライターとして＂Crayon Syntax Highlighter＂というプラグインがあります。それでは、この両者の違いは何か、またそのメリットデメリットですが、
Enlighter – Customizable Syntax Highlighter
- Gutenberg Editor 、Classic Editor のどちらにも対応している。good👌
- 更新が現在進行形で行われている。good👌
- 最近、評価が爆上げ中！？good👌
- Enlighter 〔エンライター〕 ― 啓発する者の意味・・・、何か厨二心を＂ざわざわ＂させます。
Crayon Syntax Highlighter
- Classic Editor のみにしか対応しておらず、Gutenberg Editor では使えない。bad👎
- 更新が５年前に止まっている。bad👎
- それでも圧倒的に多いユーザー数と衰えぬ人気！！great👌
- Crayon 〔クレヨン〕 ― 世界を色付ける道具の意味・・・、何か乙女心を＂キューン＂とさせます。
今のところ、分かる事はそれ位でとにかく使ってみないと分からないです。
私はプログラマーではありませんからシンタックス・ハイライターを早々頻繁に使う事がないかも知れない…。
■ Enlighterの使い方
- 罫線のノートにプログラムが書かれたフレームの右上部分にマウスオーバーさせます。
＂Copy to clipboard＂と表示されます。 - そこをクリックします。
PCのクリップボードにプログラム内容がコピーされ保持されました。
- WordPressのClassic Editorの＂Code Insert＂をクリックします。
[図_3] 左 赤枠
- Enlighterにソースプログラムを＂ピッ＂とペーストします。
- 最後に [OK] をクリックします。
前回の投稿記事はEnlighterを使い作成しました。併せてご覧下さい。
ご参考になればと思います。
■ Enlighterの設定方法
うはｗ日本語でおkwww
当然全く分からのでexcite先生に聞いてきました … …。
原文
Appearance
- Theme
The standard theme. Used in case no block specific theme is selected.
Enlighter
- Code indentation
Replace each tab at the beginning of a line with a selectable number of space-characters. Recommend for cross-browser-compatibility.
- Text overflow
Set the text/word wrapping behaviour: break line or scroll.
break line
Add scrollbar
- Line-numbering
Should linenumbers be shown on codeblocks?
・
- Line-hovereffect
Display hover effects on each line.
・
- RAW-Code on doubleclick
Show raw-code without highlighting on double-click.
・
・
Toolbar
- Visibility
Change the visiblity of the top-toolbar containing the buttons.
- Raw code button
Show the raw code button: switches highlighted code with the origin codeblock.
・
- New window button
Open the origin code (without highlighting) in a new browser window.
・
- Copy-to-clipboard button
Show the copy-to-clipboard button. Works within all modern web-browsers.
・
- EnlighterJS website button
Please keep the EnlighterJS website link visible to give other users the ability to get in touch with EnlighterJS and the Enlighter WordPress plugin.
Google翻訳
[名詞] 出現(すること); (会などに)姿を見せること，
- テーマ
標準テーマ。ブロック固有のテーマが選択されていない場合に使用されます。
デフォルトの状態が、Enlighterというテーマらしい。
- コードのインデント
行の先頭にある各タブを、選択可能な数のスペース文字に置き換えます。 クロスブラウザ互換性のために推奨。
インデント（tab）のスペースの数を変更できるらしい。
- テキストオーバーフロー
テキスト/ワードラップの動作を設定します：改行またはスクロール。
break line：折り返す。
Add scrollbar：スクロールバーを表示する。
- 行番号付け
行番号はコードブロックに表示する必要がありますか？
行数の表示をする/しない。
- ラインホバー効果
各行にホバー効果を表示します。
マウスオーバーした時だけハイライト表示する/しない。
- ダブルクリックでの生コード
ダブルクリックで強調表示せず生コードを表示します。
ダブルクリックでソースコードを表示する/しない。
・
[名詞] 正面刃物棒，ツールバー，刃物棒.
- 可視性
ボタンを含む上部ツールバーの表示を変更します。
上部にあるツールバーを透過表示する/しない。
- 生コードボタン
生のコードボタンを表示します。強調表示されたコードを元のコードブロックに切り替えます。
ソースコードのボタンを表示する/しない。
- 新しいウィンドウボタン
新しいブラウザウィンドウで元のコードを（強調表示せずに）開きます。
新しいタブ・ウィンドウでソースを表示させるボタン。
- クリップボードにコピーボタン
クリップボードにコピーボタンを表示します。 最新のすべてのWebブラウザ内で機能します。
クリップボードにコピーボタンを表示する/しない。
- EnlighterJSWebサイトボタン
EnlighterJS Webサイトのリンクを表示したままにして、他のユーザーがEnlighterJSおよびEnlighterWordPressプラグインにアクセスできるようにしてください。
Enlighterの公式サイトが開くボタンっぽい。
[図_2]
ちなみに私の設定は、[Thema：Godzilla]、[Text overflow：Break line] 、[Copy-to-clipboard button：Enable] にしております。
・
この様に表示させると、まさにプロフェッショナルっぽくてクールな感じになります。
ネットでこういうのよく見かけますよね🙄
こちらの設定方法は、[Thema：Atomic]、[Text overflow：Add Scrollbar] です。
今回は以上です。
EyeCatch画像：星宝転生ジュエルセイバー 司馬青獅/ブリリアントサービス