ブログ

Linux・オープンソースプロジェクトのティップス紹介

2017/01/05  Ubuntu, リナックス, ウェブデザイン


    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

 

ブログなどのCMSに標準装備されているエディター CKEditor のプラグインである Code Snippet によりプログラムコードをハイライト表示させます。ハイライト表示させる方法としてSyntaxhighlighterなど 各種フリーウェア がありますが、Code Snippetでも同等の機能を有するため、これを今回導入します。

 

今回導入するプラグインは、

Code Snippet
http://ckeditor.com/addon/codesnippet

と依存関係にある以下のプラグインです。下記関連プラグインをインストールしないとCode Snippetが上手く機能しません。

依存関係の確認はプラグインをダウンロードすると表示されます。

Widget
http://ckeditor.com/addon/widget

Line Utilities
http://ckeditor.com/addon/lineutils

上記プラグインとの依存関係にあるプラグインもインストールする必要があります。CKEditor4.6.2でcodesnippetを利用する場合には

widgetselection,dialoguiのプラグインも必要になります。

 

インストールされている各種CMSのフォルダからCKEditorのフォルダを検索しCKEditorのバージョンを確認します。

CHANGE.mdの変更履歴からバージョンの確認ができます。

 

上記CKEditorのバージョンに合致するプラグインをダウンロードして解凍します。

 

CKEditorのpluginsフォルダに解凍したフォルダをコピーします。

CKEditorの設定ファイルである config.js にプラグインの設定を記述します。

CKEditor4.6.2では他のプラグインとの依存関係から

"config.extraPlugins = 'codesnippet,widget,widgetselection,lineutils,dialogui';" を追加します。

CKEDITOR.editorConfig = function( config ) {
      // Define changes to default configuration here. For example:
      // config.language = 'fr';
      // config.uiColor = '#AADC6E';
      config.extraPlugins = 'codesnippet,widget,widgetselection,lineutils,dialogui';
};

 

CKEditorを読み込むページの`<head>...</head>`の部分に以下を追加します。

<head>
    ...
    <link href="ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" rel="stylesheet">
    <script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>

default.css,hightlight.pack.jsまでのパスはhtmlホームディレクトリからのパスを指定して下さい。

 

デフォルトのCSSでは半角スペース、タブ、改行をそのまま表示しないため white-space: pre; overflow-x: auto; を使用するcssファイルに追加します。

.hljs {
  display: block;
  padding: 0.5em;
  background: #002b36;
  color: #839496;
  white-space: pre;
  overflow-x: auto;
}

 

プラグイン導入後、ブラウザの検証機能でパスの設定などのエラーが検出されないか確認して下さい。

強調表示の色配分などは指定するcssを変更することで可能です。以下ページでCSSによるハイライトの違いを確認できます。

https://highlightjs.org/static/demo/

Code_Snippetドキュメントページ

 

comments powered by Disqus