[wordpress]ページ内でサンプルコードを表示するプラグインCrayon Syntax Highlighter

November 7, 2016
約 1 分

みなさん、こんにちわ!

 

自分の仕事をつくるためのWEB制作のお手伝いをしています!くりです!

 

この記事のようにWEBページを作成するための方法を紹介するときって、
そのサンプルコードを載せる必要がありますね。

 

コードを、エディターソフトのようにハイライトしたりみやすく表示するには
Javascriptライブラリを使って行うのですが、
Wordpressでやる場合は便利なプラグインがあります。

 

それは

「Crayon Syntax Highlighter」(シンタックス・ハイライター)

です。

 

1.プラグインをインストールすると、記事編集エディタに専用のボタンがでてきます。

crayonbuttun
2.そのボタンを押すと表示される挿入画面から表示するソースコードを登録します。

crayonwindow

3.ソースコードの表示例

<div align = "center">
<form>
	<input type="search" name="s">
	<input type="hidden" name="cat" value="310">
	<input type="submit" value="検索">
</form>
</div>

 

4.インストール方法

WordPress管理画面 > プラグイン > 新規追加 >「Crayon Syntax Highlighter」で検索

 

The following two tabs change content below.
くりばやしさとし

くりばやしさとし

 これまで、コーチングや自己対話トレーニングを通して、天性を見つけて天職をつくる、手伝いをさせていただいてきました。これらにホームページ作成やブログカスタマイズやメディア活用についての、WEBサポート/ITサポートおよびコンサルティングを合わせて、これからは「アートもデザインも心理もテクノロジーもマーケティングもビジネスもわかるクリエーター」として、自分の仕事を通して人や世界を良くしていきたい人たちのお手伝いをさせてもらえたらうれしいです!  「作って終わりではなくて、その後の成長も感じていきたい」「人生に関わり続けたい」という想いで、「ウェブもシゴトも育て続ける」「夢や目標を達成して一緒に感動する」をモットーにした制作を行っています。


ホームページやウェブサービスをつくっていると、よくわからないことでつまづいて、ものすごく時間がかかることがある→そんな時に助けてくれる人が欲しい!という方はいますか?

毎日質問可能なオンライン制作サポートも行っています!
まずはこちらから気軽にご相談ください!

Leave A Reply

*
*
* (公開されません)