もう、共働きやめます。

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

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

   

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

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

// 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
SPONSORED LINK

まとめ

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

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

 

 

 - WordPress

ソースコードを番号をつけてブログに載せる方法。キレイで見やすいよ!
この記事をお届けした
もう、共働きやめます。の最新ニュース情報を、
いいねしてチェックしよう!
SPONSORED LINK

SPONSORED LINK

       
ブログの更新情報はこちらから配信中

follow us in feedly

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

ブログをカスタマイズしていく前に【 BackWPup】でバックアップを取ります。

ブログをカスタマイズしていく前にBackWPupでバックアップを取ります。 どう …

アイキャッチ画像を記事内に表示させる方法を紹介します。

どうも。働かない夫です。 アイキャッチ画像はとっても便利です。記事を一覧表示させ …

SNSシェアボタンのCSSがさっぱりわからん!カスタマイズ前に調べたよ!

どうも、働かない夫です。 ブログカスタマイズはしたいのですが、HTML、CSS、 …

【WordPress】目次をつけてユーザビリティを向上させる方法

どうも。働かない夫です。 様々なブログを見ていると目次があるブログって結構ありま …

【WordPress】STINGERをカスタマイズする前に確認したいブログ

どうも。働かない夫です。 ブログはカスタマイズしたいけど、「Class」って何? …

【初心者向け】MacでSTINGER5を導入する方法。

どうも、働かない夫です。 今回、STINGER5を導入しました。 かなりスムーズ …

【STINGER5】番号付リストのズレの直し方

どうも、働かない夫です。 今まで放置していましたが、番号付きリストを100個も作 …

【STINGER5】引用っぽい表示を簡単にさせるAddQuicktagの設定方法と使い方

どうも、働かない夫です。 このブログを書く時は、だいたいはWordPressで作 …

【STINGER5】ファンを増やすSNSボタンを追加しました!

どうも、働かない夫です。 ブログをやる上で欠かせないのが、SNSボタン。こちらが …

XServerのアクセス制限で全ページ認証確認された場合の対処方法

どうも、ハタオトです。 別サイトなんですが、ちょっとしたエラーが出たのでシェアし …