ブログにソースコードをシャレオツに貼り付ける方法|WordPress

ウェブデザイン系やプログラミング系ブログを見ているとシャレオツにコードを載せています。

シャレオツなコードはこれ↓↓↓

 

<html>
<p>
これがやりたかった!
</p>
</html>

 

 

何これ!?どうやったら出来るの!!?

ということでグーグルさんで検索してみるといっぱい出てきた。有名なんですね。

 

このやり方を紹介していきます。

 

 

コードハイライト「Crayon Syntax Highlighter」

シンタックスハイライター関連のWordPressプラグイン「Crayon Syntax Highlighter」

 

もはや何のことだかよくわからん。

簡単に言うと、ウェブサイトの中身であるソースコードっていう文字列を役割ごとに色分けしてくれるスゴくいかした存在ってこと。

 

 

これはプラグインっていうパワーアップアイテムで、WordPressに入れて、ほんと簡単に使うことが出来る優れものなんですね。

 

 

プラグインの導入方法

まずは、リンク先にアクセスする。

WordPress › Crayon Syntax Highlighter « WordPress Plugins

するとこんなページが開く。

ピクチャ 51

[Download Version]をクリックすると、プラグインのダウンロードが始まる。

ピクチャ 53

 

ダウンロードは一瞬で終わるので、完了したらWordPressを開く。

 

ピクチャ 54

ダッシュボードを開いたら、プラグインにカーソルを合わせて[新規追加]をクリックしよう。

 

ピクチャ 55

アップロードをクリックすると次のようなボックスが開く。

 

ピクチャ 57

[ファイルを選択]をクリックして先ほどダウンロードしたZIPファイルを選ぼう。

 

ピクチャ 58

そしていますぐインストールをクリックする。

 

これでインストールは完了。

次から記事を書く時には新しいアイコンが追加されています。

 

 

Crayon Syntax Highlighterの使い方

新規投稿のツールバーに<>みたいのが追加されている。

ピクチャ 60

クリックすると以下のように開く。

ピクチャ 9

 

コードを入れて[挿入]を押せば

<html>
<p>
これがやりたかった!
</p>
</html>

 こうなります。シャレオツですね。

 

 

 

29のデザインから選べるシャレオツ設定

Crayon Syntax Highlighterは カラーやスタイルが選べる。ここではスタイルの設定方法を説明していきます。

 

ピクチャ 10

サイドメニューのプラグインから[インストール済みプラグイン]をクリックする。

 

ずらとインストール済みのプラグインが出てくるので、Crayon Syntax Highlighterの[設定]をクリック

ピクチャ 12

プルダウンボタンをクリックすると

ピクチャ 13

29のデザインを選ぶ事が出来るます。

 

 

プログラミング系の記事を書くなら必須アイテムですね。

 

 

 

 

他にも設定はいろいろあるようです。詳しいやり方は、こちらのWataameさんの記事が参考になります。

コードハイライタープラグインを Crayon Syntax Highlighter にしてみました。 | Wataame Frog
Crayon Syntax Highlighter …

ランキング|現在16位/500サイト
1日1回旅バナーをクリック頂けると更新の励みになります^^
にほんブログ村 旅行ブログ 日本一周へ

Pocket

コメントを残す