WordPressプラグイン「Crayon Syntax Highlighter」で綺麗にソースコードを表示させる

内容一覧

1 Crayon Syntax Highlighterとは
2 Crayon Syntax Highlighterのインストール方法
3 Crayon Syntax Highlighter設定方法
4 Crayon Syntax Highlighter使い方
5 Crayon Syntax Highlighterまとめ

こんにちわ！

ひでゆきです^^(dehichan0728)

今日は記事中のソースコードを紹介したいと思ったときに、綺麗に表示させることができるプラグインを紹介します！

ソースコードっていうのは、ページ上で右クリックすると見れます。

Crayon Syntax Highlighterとは

Crayon Syntax Highlighterは、WordPressの記事中のソースコードを綺麗に表示させることができるプラグインです。

他の人にコードを紹介したい！

というときに、このプラグインを使います。

そのまま貼るのはちょっとなしよねぇ～

投稿日：<time datetime=”<?php the_time(‘Y-m-d’); ?>” itemprop=”datePublished” content=”<?php the_time(‘Y-m-d’); ?>” ><?php the_time(get_option(‘date_format’)); ?></time> | 更新日：<time datetime=”<?php the_time(‘Y-m-d’); ?>” itemprop=”dateModified” content=”<?php the_modified_date(‘Y-m-d’) ?>” ><?php the_modified_date(get_option(‘date_format’)); ?></time>

こうやってみます？

投稿日：<time datetime=”<?php the_time(‘Y-m-d’); ?>” itemprop=”datePublished” content=”<?php the_time(‘Y-m-d’); ?>” ><?php the_time(get_option(‘date_format’)); ?></time> | 更新日：<time datetime=”<?php the_time(‘Y-m-d’); ?>” itemprop=”dateModified” content=”<?php the_modified_date(‘Y-m-d’) ?>” ><?php the_modified_date(get_option(‘date_format’)); ?></time>

どうせならソースの色味とかそのままの方が見栄えいいですよね。

そんな時に「Crayon Syntax Highlighter」プラグインを使えばソースを綺麗に表示できちゃいます！

投稿日：<time datetime="<?php the_time('Y-m-d'); ?>" itemprop="datePublished" content="<?php the_time('Y-m-d'); ?>" ><?php the_time(get_option('date_format')); ?></time> | 更新日：<time datetime="<?php the_time('Y-m-d'); ?>" itemprop="dateModified" content="<?php the_modified_date('Y-m-d') ?>" ><?php the_modified_date(get_option('date_format')); ?></time>

どうでしょうか、この方がカッコいいでしょ？笑

見た感じもソースなんだ。ということが伝わりやすいです。

では、インストール方法、設定、使い方を説明していきます！

Crayon Syntax Highlighterのインストール方法

WordPressでプラグインをインストールしたことないよ！

という方はこちらWordPress入門「プラグインとは」「インストールする方法」

Crayon Syntax Highlighter設定方法

このプラグインは設定不要で使えます！

それぞれがカスタマイズすることができるのでお好みでお願いします～

ダッシュボード「設定」→「crayon」

テーマ選択

テーマは好きなものを選択してください！

テーマの一部こんな感じ…

全部書きだすの途中で諦めました。ごめんなさい！

1c kod

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

1c　Zapros

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

809finset

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Ado

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Amity

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Arduino ldo

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Bncplusplus

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Capactitacionti

class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Cg Cookie

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Cisco Router

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Classic

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Code Spesial Board

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Coy

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Dark Terminal

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Eclipsc

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Epicgeeks

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Familiar

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Feeldesign

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

Flatui Ligt

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

まだまだ種類ありますが、この辺にしときましょう。笑

ここで好きなテーマを選んでください、特に選ばなくても使えます。

フォント選択

もう見本は出しません…数が多すぎます！！笑

こんな感じに変わったりします、フォントを選択したらその場でサンプル変わります。

// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

サイズ選択

気になる方はやってください！笑

それ以降の設定

そのままでも使えます！

このままで問題なーし！

Crayon Syntax Highlighter使い方

プラグインを有効化すると、記事の装飾関連に追加されます。

ビジュアル

テキスト

それぞれのボタンをクリックすると以下の画面がでます。

①タイトルを記入

②1文章として表示

改行がないソースで使います。

どっちでも使えます、見やすさを考えるとチェックをした方がいいでしょう。

チェックなし

<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1046"><a href="https://dehichan.com/category/beginner/open-set/">

1	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1046"><a href="https://dehichan.com/category/beginner/open-set/">

チェックあり

③挿入

これをクリックすることでソースを記事内に表示します。

④コードを貼り付ける場所

綺麗に表示したいソースを貼り付けます。

Crayon Syntax Highlighterまとめ

使い方は本当にシンプルです！！

設定不要で使えることも嬉しいですね。

そのまま貼り付けでもいいですが、見栄えを考えるとプラグインを使った方がいいでしょう！！

見栄えと手軽さでこのプラグインが1番いいですよ＾＾

では！！

WordPressプラグイン「Crayon Syntax Highlighter」で綺麗にソースコードを表示させる

Crayon Syntax Highlighterとは

Crayon Syntax Highlighterのインストール方法

Crayon Syntax Highlighter設定方法

テーマ選択

フォント選択

サイズ選択

それ以降の設定

Crayon Syntax Highlighter使い方

Crayon Syntax Highlighterまとめ

コメントを残すコメントをキャンセル

プロフィール

カテゴリー

アーカイブ

最近書いた記事

カテゴリー

メタ情報

Crayon Syntax Highlighterとは

Crayon Syntax Highlighterのインストール方法

Crayon Syntax Highlighter設定方法

テーマ選択

フォント選択

サイズ選択

それ以降の設定

Crayon Syntax Highlighter使い方

Crayon Syntax Highlighterまとめ

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

EWWW Image Optimizerで画像圧縮が1番簡単なSEO対策だ！

WordPressでバックアップを取っていない人は損をする。Dropbo…

WordPressにお問い合わせフォームを設置しよう！Contact F…

AddQuicktagでブログが楽しくなる？！めっちゃ便利なWordPr…

「Multi Plugin Installer」の使い方/「複数のプラグ…

「Head Cleaner」でページの表示速度を向上させる！WordPr…

【2016年版】最初に導入しよう！Wordpressプラグイン集

ダメ！絶対！！リンク切れを防ぐWordPressプラグイン「Broken…

プロフィール

人気記事一覧

カテゴリー

アーカイブ

最近書いた記事

カテゴリー

メタ情報

コメントを残すコメントをキャンセル