ちょいきに!

脱出ゲーム攻略・ネタばれ・考察、たまに生活ネタやノウハウ系記事も

覚書き

サンプルソースコードを表示する方法はとっても簡単だった!

投稿日:2017年12月25日 更新日:

覚書き記事を作成中に、サンプルソースを表示させたいな…ということがありました。
他の方の記事でよく目にするのは…

こういう表示。

これ、私の記事でも採用したい!!!
「でもどうやって???」

これには、プラグインの「Crayon Syntax Highlighter」が必要みたいです。

インストールも使い方もとっても簡単だったので、覚書きに残しておきますね。
自分の記事でも使いたいという方も、ぜひ参考になさってください。



まずはインストールから

①ダッシュボードメニューから「プラグイン」→「新規追加」

 

②キーワードに「Crayon Syntax Highlighter」を入れる

 

③「今すぐインストール」をクリック

 

④「有効化」をクリック

これでインストールは終了です。次に設定を行います。

設定を行いましょう

①ダッシュボードメニューから「設定」→「Crayon」

 

②Tagsの「Capture <pre> tags as Crayons」にチェックが入っているのを確認
 チェックがなければ、入れておいてください。

 

③次はお好みですが、デフォルトだとタイトル部分(赤枠で囲っているところ)はオンマウス時に表示されるようになっています。

ここを常に表示させておくには、
ToolbarのDisplay the Toolbarのプルタブから「Always」を選択します。

 

④設定が完了したら、「Save Changes」で内容を保存します。

これで設定も完了です。さぁ、いよいよ使ってみましょう!

 

使ってみよう!

①新しい記事を開いて、「テキスト」を選択します。
※ビジュアルでもできるという記事も見かけましたが、私の使っているSTINGER PLUS2ではできませんでした。

②サンプルコード表示のためのタグを入れる

<pre title="タイトル" lang="”HTML”">ここにソースコードを書く
</pre>

【title】ツール上に表示されるタイトルを記述
【lang】使用言語を記述

③最後にプレビューで確認しましょう

こんな感じで表示されれば成功です!お疲れさまでしたー!

-覚書き
-, , ,

Copyright© ちょいきに! , 2019 All Rights Reserved Powered by STINGER.