guttally.net

Guttally Syntax Highlighter - インストール方法

1. Syntax Highlighter のインストール

 初めに,concrete5 の配下に Syntax Highlighter をインストールします。

1.1. インストールディレクトリの作成

 concrete5 の配下に Syntax Highlighter をインストールするためのディレクトリを作成します。

 concrete5 のインストールディレクトリ (以下,「ベースディレクトリ」 と言います) には,javascript を格納する js というディレクトリと,スタイルシートを格納する css というディレクトリがあります。 それぞれのディレクトリ内に,Syntax Highlighter のファイルを格納するための sh という名前のディレクトリを作成します。

DirList 1-1. concrete5 のディレクトリ構成 (抄)
ベースディレクトリ  // concrete5 インストールディレクトリ
|
|---blocks  // ブロックタイプを格納するディレクトリ
|
|---js      // javascript を格納するディレクトリ
|   |
|   |---sh  // ← 作成
|
|---css     // スタイルシートを格納するディレクトリ
|   |
~   |---sh  // ← 作成

1.2. Syntax Highlighter のダウンロード

 Syntax Highlighter のダウンロードページから version 3.0.83 をダウンロードします。

Syntax Highlighter ダウンロードページのスクリーンショット

 ダウンロードした zip ファイルを解凍すると,以下の構成になっています。

DirList 1-2. Syntax Highlighter の zip の中身
syntaxhighlighter_3.0.83
|   index.html
|   LGPL-LICENCE
|   MIT-LICENCE
|---compass
|---scripts // javascript ファイルが入っています
|---src
|---styles  // スタイルシートファイルが入っています
|---tests

1.3. ファイルのアップロード

 解凍した Syntax Highlighter の zip ファイルから,必要なファイルをアップロードします。

 Syntax Highlighter の scripts フォルダ内にある javascript ファイル一式を,手順 1.1 で作成した js/sh ディレクトリにアップロードします。 同様に,Syntax Highlighter の styles フォルダ内にある css ファイル一式を,手順 1.1 で作成した css/sh ディレクトリにアップロードします。

2. GuttallySyntaxHighlighter のインストール

2.1. GuttallySyntaxHighlighter のダウンロード

 GuttallySyntaxHighlighter を紹介ページからダウンロードします。 ダウンロードした zip を解凍すると,以下のようなディレクトリ構成になっています。

DirList 2-1. GuttallySyntaxHighlighter の zip の中身
GuttallySyntaxHighlighter_X_Y_Z // X_Y_Z: バージョン番号
|   LICENCE.txt
|   readme.txt
|
|---guttally_syntax_highlighter // GuttallySyntaxHighlighter の本体
        add.php
        auto.js
        controller.php
        db.xml
        edit.php
        form.php
        view.css
        view.php

2.2. ファイルのアップロード

 Zip を解凍してできた guttally_syntax_highlighter フォルダとその中身 (DirList 2-1 の 5 行目以下) を丸ごとベースディレクトリにある blocks ディレクトリ (DirList 1-1 の 3 行目) へアップロードします。

2.3. concrete5 へのインストール

 concrete5 へログインして,管理画面の 「スタックとブロック」 グループから 「ブロックタイプ」 を開きます。

concrete5 管理画面のスクリーンショット

 インストール待ちのブロックタイプとして Guttally Syntax Highlighter が表示されているので,インストールボタンをクリックします。

 インストール待ち.png

 以上で,Guttally Syntax Highlighter が concrete5 へインストールされます。