Concrete5 5.6でSyntaxHighlighterを使う

旧日記 
この記事は2015年11月18日に旧HPに投稿したものです

前略

鴉河雛です

そんなわけで、前回の記事ですでに使っていたのですが、

このサイトの今後のことを考えると、コードを記事上で書くことも多いかなぁとか思っていたので、

SyntaxHighlighterをどうしても入れたかったので試してみました。

ただ、色々サイトを参考にしたのですが、全く意味不明ｗｗｗ

上級者向けで不親切（？）でした・・・(´･ω･｀)

（そもそも初心者の私にTinyMCEとか言われても最初何のことかわからんかったよ。。。）

そんなわけで今回導入にそれなりにてこずったので、私のやり方での導入方法をメモがてら残しておきます。

追記：Concrete5 5.7ではTinyMCEではなく、Redactorを使っています。

　　　　こちらにも同じくソースコードをハイライトするPluginがありますが、追加方法がわからない（あるいは導入されているが使い方がわからない）ため、わかり次第記事を書きます。

1､syntaxhlをDLする

TinyMCEと言う記事を書くためのやつをたぶんデフォルトで使用していると思うのですが、

それのプラグインをダウンロードします。

https://github.com/RichGuk/syntaxhl

右側に Download ZIPと書かれたボタンがあるのでそれを押しましょう。

ダウンロードしたZIPファイル（私の時はsyntaxhl-master.zipでした）を解凍します。

中にsyntaxhl-masterフォルダがあるので、syntaxhlに変更してください。

2､言語ファイルを作成する

解凍とリネームが完了したら、syntaxhlフォルダ内にある下記ファイルをコピーしてリネームをします。

  • en.js 　　　　 ⇒　ja.js
  • en_dlg.js　　⇒ ja_dlg.js

ただ、これで私中身も書き換えて日本語化したのですが、いまいち適用されず。。。

3､Pluginフォルダに配置する

変更が完了したらsyntaxhlフォルダを、

/concrete/js/tiny_mce/plugin/　内に入れてください。

（環境によってそれぞれ合わせてください）

4､TinyMCEの設定を変更する

はい、ここで私は積みました。

そもそもTinyMCEってなんやーーーーとか思ってたのですが、

どうやら記事を作成するためのエディタのことらしい。。

と言うことで、設定をします。

システムと設定へ移動して、記事ブロックエディター設定へ行きます。

設定画面へ行ったら、カスタムを選択してください。

あとは画像の緑下線の位置を修正していきます。

それぞれの項目にsyntaxhlを追加していきます。

#1個目 plugins: "inlinepopups,spellchecker,safari,advlink,syntaxhl", #2個目 theme\_concrete\_buttons2 : "formatselect,bullist,numlist,|,outdent,indent,|,hr,charmap,|,forecolor,backcolor,|,link,unlink,anchor,syntaxhl",

そして下記を最終行へ追加します。

extended\_valid\_elements: "textarea[cols|rows|disabled|name|readonly|class], iframe[height|width|style|src]",

変更が完了したら保存してください。

5､SyntaxHighlighterをDLする

公式サイトからSyntaxHighlighterをDLしてください。

たぶん右側にDownloadがあると思います。（私の時はsyntaxhighlighter_3.0.83.zipでした）

DLしたら解凍して、中のフォルダ名をsyntax_highlighterに変更してください。

6､syntaxhighlighterを設置する

変更したフォルダを任意の場所に設置します。

今回は /js　内に設置してください。

7､ヘッダーを変更

利用しているテーマのheader.phpに追加するのですが、

私はトラッキングコードを使用しました。

トラッキングコードへ下記を追加します。（パスはそれぞれ環境に合わせてください）

（用途に合わせてコードのファイルを追加してください）

\<script type="text/javascript" src="/js/syntax\_highlighter/scripts/shCore.js"\>\</script\> \<script type="text/javascript" src="/js/syntax\_highlighter/scripts/shBrushJScript.js"\>\</script\> \<script type="text/javascript"\>// \<![CDATA[SyntaxHighlighter.all(); //]]\>\</script\>

これで設定は完了です。

8､使用してみる

設定が完了すると、TinyMCE上にsyntaxhlのアイコンが追加されています。

あとはそれをクリックしてコードを入力して挿入すれば完了です！

ところでこの状態なんだけどこれって正常？

まぁこんな感じで一応使えるようにはなります。

これが使えればいろんなことができるようになるので、便利ですね！（コード書けるだけだろｗ）

ではそんなわけで、また。