• TOP
  • WordPress
    • まとめ
    • JavaScript
    • 記事
    • 画像/動画
    • 管理
    • アクセス/SEO対策
    • カテゴリ
    • サイドバー/ヘッダー
    • アイキャッチ
    • パスワード
    • コメント
  • プラグイン
  • CSS
  • ユーザー限定
Plus WordPress ワードプレスの基本・応用テクニックを紹介
ホーム › プラグイン › 記事にソースコードを表示 Crayon Syntax Highlighter

記事にソースコードを表示 Crayon Syntax Highlighter

プラグイン名 Crayon Syntax Highlighter

記事にソースコードを表示できるようにする、技術系のサイトを作る人向けのプラグインです。Crayon Syntax Highlighterは、定番の「SyntaxHighlighter Evolved」と比べるとおしゃれな機能が搭載されています。

インストール手順

プラグイン > 新規追加 > Crayon Syntax Highlighter > プラグインを検索 > いますぐインストール > プラグインを有効化

設定

設定 > Crayon

設定はお好みで、私が変更したのは、テーマ、フォント、フォントサイズ、ツールバーは表示しない、Crayon抜粋から削除にチェックを入れました。

SyntaxHighlighter Evolvedとの違い

  • テーマの量(現在25種類)
  • ツールバーの機能
  • デモ
    (ツールバーを非表示にしている場合タイトルが表示されません)
    1
    2
    3
    4
    #wrapper {
    box-shadow: 0 0 4px 0 #777;
    -moz-box-shadow: 0 0 4px 0 #777;
    -webkit-box-shadow: 0 0 4px 0 #777;


    タイトル
    とハイライトのショートコード

    [crayon mark=”3-4″ title=”ボックスシャドウ”]
    #wrapper {
    box-shadow: 0 0 4px 0 #777;
    -moz-box-shadow: 0 0 4px 0 #777;
    -webkit-box-shadow: 0 0 4px 0 #777;
    [/crayon]

    タイトルとハイライトがいらない場合は、[crayon]ソース[/crayon]だけでOKです。
    ※[]を大文字で表示しているので↑のショートコードは小文字の[]に変更してください。

投稿ページにボタンが追加されます。

ボタンcrayonを押すと↓のような挿入画面が現れます。

「タイトル」「マークするライン」「コード」など一通りのものはあります。右上の挿入を押すと<pre class……..で挿入されますが、これでも問題なく表示されます。

SyntaxHighlighter Evolvedと比較すると、ツールバーの機能、テーマの量、フォントの変更、投稿時のサポート、こんな感じで結構違います。そしてショートコードが一つで済むというのも大きなメリットです。

タグ: ソースコード
カテゴリー: プラグイン, 記事
“記事にソースコードを表示 Crayon Syntax Highlighter” への1件のコメント
"記事にソースコードを表示 Crayon Syntax Highlighter" に 1 トラックバック・ピンバック
  1. ソースコードをキレイに表示するWordPressプラグイン | My Tips and Quotes より:
    2015/02/18 11:25

    […] 記事にソースコードを表示 Crayon Syntax Highlighter | Plus WordPress […]

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

関連記事
記事にソースコードを表示 SyntaxHighlighter Evolved
ショートコードを追加するプラグイン
テーマファイル内でショートコードを使えるようにする
記事をランダムに表示させる
記事の内容に関連した別の記事を自動表示
記事に登録したカテゴリの一括変更
人気記事
高機能でオシャレな実用的メニュー(HTMLテンプレート)
Webページ全体をフェードイン、フェードアウト
投稿、固定ページ内にウィジェットを挿入
記事の続きを読むを消す
コメントに画像を挿入できるようにする
最新記事を自動でスライドショー
指定したカテゴリIDのカテゴリ名のみ取得
フリーの高機能HTMLテンプレート
記事ごとに個別のCSSやJavaScriptを追加
特定のカテゴリに個別のCSSを適応させる
Contact Form7の送信完了画面をカスタマイズ
カテゴリ別に違うカテゴリ(テンプレート)を表示
画像や動画をポップアップし再生
phpMyAdminのユーザー名とパスワードの確認方法
タイトルや本文からタグを自動生成
非表示、置換テクニック
カテゴリー別に違うサイドバーを出す
CSSやJavaScriptのハンドル名(id)を確認
CSS3のみで画面外からメニューをスライド表示
管理画面の投稿一覧で投稿IDを表示する
アイキャッチ(サムネイル)を呼び出す
スライドショー Meteor Slides
ページごとに違うヘッダーを読み込む
カテゴリに別々のアイコンを表示
背景をスライドショーにする
CSS3 角を丸くする
レスポンシブなLightbox jQuery プラグイン Strip
コメントのメールアドレス入力覧を消す
記事をランダムに表示させる
スライドショー Skitter Slideshow
パスワードを間違えると一定時間ログインできないようにする
購読者にパスワードを変更させない
管理画面の投稿一覧へアイキャッチを表示
個別にJavaScriptを振り分ける
Contact Form7に画像認証機能を追加
ショートコードを追加するプラグイン
リンクの表示順を並べ替える
JavaScriptで画面外からメニューをスライド表示
サイト全体のサムネイルサイズを変更
指定した日付や時間を基準に振り分け
    メルマガ購読
  • メールマガジンではWordPressのおもしろい使い方を紹介しています。またユーザー限定ページとも連動しているので、そちらも自由に観覧できるようになります。
  • 登録フォーム
PlusWordPress
  • お問い合わせ
  • このサイトについて
Link
  • 人気ブログランキング
  • 使えるWordPressテーマ
背景変更
  • デフォルト
  • ホワイト
  • ブラック
  • グレー
  • Facebook
  • RSS Feed
  • Google Plus
© 2023 Plus WordPress