制作のご相談はこちら
備忘録サイトに便利なライブデモ機能付きプラグインを追加しました

公開日 : 2016年05月19日 / 最終更新日 : 2017年11月16日

備忘録サイトに便利なライブデモ機能付きプラグインを追加しました

久しぶりの更新です。2016年ももうすぐ半分…早いです…

WEB関連に勤めている方ならあるあるかと思いますが、コーディングが詰まった時にネットサーフィンをして備忘録サイトに探していた解決法があって助かった-なんてことがありますよね。
法人・個人問わずTipsブログが増えていますので、私の経験上ではコーディングのある程度のことは解決することが多いです。(そして自分の検索ワードスキルも上がります…)

自分でもこのサイトで備忘録を記していますが、以前まではソース表示はSyntaxHighlighterを利用し、デモは別ページへ飛ばしていましたが、だんだん別ページに飛ぶのが手間になってきました。
なのでライブデモで閲覧者にすぐ結果表示を確認していただけるよう、新しいプラグインを導入しました。

導入したプラグインはEx Code Prettifyです。
Bootstrapにも対応しています。

Ex Code Prettifyの使い方

こちらからzipファイルをダウンロードします。

必要なファイルを格納する

ダウンロードしたzipファイルからjs、cssファイルをサーバーへ格納します。
その後下記のように呼び出します。

デモを表示しない場合

textarea要素内にハイライトしたいソースを記述します。
※textarea前に半角スペースを入れていますので実装時は外してください。
※Wordpressの場合は自動でpタグが入力されてしまいますので、一番外側をpreタグで挟んでください。

ソースのみを表示する場合、textarea要素に対し、こちらのメソッドを実行します。

結果はこのように表示されます。

デモを表示する場合

textarea要素内にハイライトしたいソースを記述します。
※textarea前に半角スペースを入れていますので実装時は外してください。
※Wordpressの場合は自動でpタグが入力されてしまいますので、一番外側をpreタグで挟んでください。

textarea要素に対し、showDemoパラメータを追加します。

結果はこのように表示されます。

こちらを参考にさせていただきました。他にも表示オプションがありますので、ぜひお試しください。
その場で編集/実行できるシンタックスハイライター jQuery プラグイン