共働きで消耗した家族が生き方を見直してます。

もう、共働きやめます。

WordPress

ソースコードを番号をつけてブログに載せる方法。キレイで見やすいよ!

投稿日:

どうも。働かない夫です。

前回の記事で、初めてプログラミングコードを紹介しました!他のブログでもこういったものよく見ませんか?

// A sample class
class Human {
	private int age = 0;
	public void birthday() {
		age++;
		print('Happy Birthday!');
	}
}
上のコードを入力する方法を知りたくて色々と調べてみましたが、どうやら【Crayon Syntax Highlighter】と【SyntaxHighlighter TinyMCE Button】をプラグインして使うみたいですね!

今回は、このプログラミングコードをブログに載せる方法を紹介します。

①【 Crayon Syntax Highlighter】をプラグインしよう!

Crayon Syntax Highlighter

ホーム → プラグイン → 新規追加で【Crayon Syntax Highlighter】を検索しインストール&有効化。

メニューの設定から【Crayon】を選択し、初期設定後「変更を保存」をクリックし設定を保存。

初期設定はテーマを決める程度で充分です。

テーマ一覧

Classic

Classic

Eclipse

Eclipse

 Feeldesign

feeldesign

 

Secrets Of Rock

Secrets Of Rock

他にも色々、ブログの背景の色や好みで変えていただくのが良いですね。

②【SyntaxHighlighter TinyMCE Button】をプラグインしよう!

SyntaxHighlighter TinyMCE Button

ホーム → プラグイン → 新規追加で【SyntaxHighlighter TinyMCE Button】を検索しインストール&有効化。

設定→SH TinyMCE Buttonを選択し、【使用中のプラグイン】から”その他”を選択し、設定を保存する

Crayon Syntax Highlighterの役割

  • 行番号の自動でつく
  • ソースコードのハイライト表示が可能
  • テーマ選択が出来る

ここまでだと、テキストエディター(プログラミングコード)に切り替えて使わなければならない。

SyntaxHighlighter TinyMCE Buttonの役割

SyntaxHighlighter TinyMCE Buttonをプラグインする事によって

ビジュアルエディターのみでソースコードを挿入する事が可能になりました。これで、ユーザビリティが向上します。

ソースコードをブログに挿入しよう!

ビジュアルエディターで追加されるボタンが【pre】と【CODE】の2つ。

ソースコードを入れる

 

【pre】を使う場合

【pre】は編集中の記事内にソースコードがある場合に使います。

  1. 記事内のソースコードを選択する。
  2. 選択した状態で【pre】を選択する
    対象になる言語を選択などの細かい設定をして挿入します。選択したソースコードの前後が<PRE>タグを使って埋め込みます。pre

【CODE】を使う場合

個人的にはこちらを使う場合が多いです。

  1. 埋め込みたい場所で【CODE】を選択
  2. 言語の選択等の細かい設定とソースコードを入力し挿入CODE

まとめ

載せるならキレイにソースコードを挿入したいですよね。わたしは、プログラミングが得意ではないので、解読に時間がかかりました。本当、初心者向けのブログですねwww

自分が理解しやすいように書いていきましたので、導入しやすいかと思います。ソースコードを入れられなくて断念した方はこの方法でやってみてはいかがでしょうか?

 

 

  • この記事を書いた人
ハタオト

ハタオト

職業:専業主夫。サイト作って、静かに生活しています。このブログは好き勝手書いています。

-WordPress

Copyright© もう、共働きやめます。 , 2018 All Rights Reserved Powered by AFFINGER5.