ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説する機会が多い人には便利なプラグインがCrayon Syntax Highlighter。

 同じようなソースコードを表示するプラグインに比べると使い勝手が数段いい。

スポンサーリンク

Crayon Syntax Highlighterでソースコードを表示した例

Crayon Syntax Highlighterでソースコードを表示した例が↓

Crayon Syntax Highlighterr表示

 こんな感じにソースがきれいに表示される。

Crayon Syntax Highlighterの優れた点

  • プラグインをインストールして有効化するだけでOK、設定が必要ない。
  • 記事投稿の画面から簡単に操作ができる。
  • ショートコードなどの知識が要らない。
  • プログラムの知識も要らない。
  • ビジュアル、テキストの双方の編集画面から使うことができる。

Crayon Syntax Highlighterのインストール

1.「管理画面」⇒「新規追加」から「Crayon Syntax Highlighter」検索。

2.「今すぐインストール」をクリック。

3.「有効化」をクリック。

Crayon Syntax Highlighterの使い方

1.投稿の編集にボタンが追加されるのでそのボタンをクリック。

  • テキストの場合⇒「crayon」
  • ビジュアルの場合⇒太い「<>」

テキストエディタCrayon Syntax HighlighterボタンビジュアルエディタCrayon Syntax Highlighterボタン

2.ボタンを押すとコードの挿入画面が出てくる。

3.「コード」の枠の中に表示したいコードを入れる。

4.「挿入」をクリック。

Crayon Syntax Highlighterコード挿入

 プログラム言語がわからなければデフォルトのままでもOKの様子。

 非常にお手軽。

 似たようなプラグインSyntaxHighlighter Evolvedだとショートコードを自力で貼り付けないといけないがCrayon Syntax Highlighterはショートコードを貼り付ける必要も無いので本当に手軽にソースコードを表示できる。

  • にほんブログ村 ブログブログ ブログノウハウへ
    にほんブログ村
  • FC2ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

wordpressプラグイン

タグの管理を楽にするプラグインSimple Tags

 WordPressの投稿画面にもタグをクリックして入力する機能はあるのだが、よく使うタグしか表

記事を読む

wordpressカスタマイズ

記事一覧を表示するPost List Generator

 いつの間にか更新日別に並べ替えた記事一覧が「表示設定」で指定されていた件数しか表示されなくなっ

記事を読む

wordpressプラグイン

ビジュアル投稿の拡張プラグイン3つをWordPress4.0で試してみた

 WordPressの投稿の編集「ビジュアル」の使い勝手を良くするプラグインを導入したいと思う。

記事を読む

wordpress表示速度改善

目次プラグインTable of Contents Plusで遅くなったサイト表示を早くする

  目次を入れるプラグインTable of Contents Plusのスタイルシートがページの読み

記事を読む

wordpressプラグイン

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが沢山くる。  コメントスパム

記事を読む

wordpressテキストビジュアルボタン

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新やプラグインの更新が大量に発生し

記事を読む

SEO

検索エンジンのインデックスを早くしてくれるプラグイン

 クローラーが訪問する前に記事の更新を検索エンジンに知らせる仕組みとして「PuSHPress」と

記事を読む

wordpressプラグイン

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中身が何なのかわかりにくいのが難

記事を読む

no image

リンク切れをチェックするプラグインBroken Link Checkerの使い方

 ワードプレスには便利なプラグインがいろいろある。  リンク切れをチェックするプラグインBro

記事を読む

wordpressプラグイン

PS Auto Sitemap・記事一覧を作るwordpress用プラグイン

 wordpress用プラグインPS Auto Sitemapで記事の一覧を作ろう。  PS Au

記事を読む

Message

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


follow us in feedly

応援してね⇒にほんブログ村 ブログブログ ブログノウハウへにほんブログ村

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新や

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  で

ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説す

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。

お客様のホームページがアップロードされていない状態です

 Wordpressの手動インストールで無事インストールできたのに

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっき

FC2ブログとWordPressのURLの構造法則と変数

 記事数の多いFC2ブログを変数を使ってWordpressに引越し

記事数の多いFC2ブログの引越しは変数で作業時間短縮

 FC2ブログからWordpressへの引越し第二段。  FC2

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中

WordPressのカテゴリーの管理画面にIDを表示できるようにするカスタマイズ

 Wordpressのカテゴリーの管理画面に記事のIDを表示できる

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが

→wordpress初心者・STINGER3カスタマイズ中の記事をもっと見る

Googleでブログを作ろう 
 Googleの無料ブログサービスBloggerで作っているブログ。
 Bloggerの設定やカスタマイズ方法などを載せている。

使える無料ソフト&無料サービス
 高いパソコンに入ってるようなソフトは必要ない!をコンセプトに無料ソフトや無料のWEBサービスをご紹介。

  • コメントテスト

  • PAGE TOP ↑