自社のブログでtinymceを利用していて、
SyntaxHighlighterの存在を知り、「使いたいっ」と思い、いれた時のメモです。
まずはSyntaxHighlighterをダウンロード。
次にtinymceの中で利用するには、tinymceのプラグインをダウンロードする必要があるので、こちらもダウンロード。
Downloads for RichGuk’s syntaxhl – GitHub
あとは以下の参考にさせていただいたサイト通りにすれば完了！！
・・・ってこのブログではあんまり説明してないようなもんですが・・・
Concrete5のTinyMceにSyntax Highlighterプラグインを利用できるようにする。 « sharedhat – Personal blog of Noritaka Horio
ただ、一点、
4. TimyMCE設定の変更
だけ、どこのファイルを変更すればいいんだろうと思ったので、僕なりの補足します。
tinymceを入れたテンプレートのファイル(＝ブログを書くテンプレートかな？)に
以下のようなソースが書いてあると思います。（おそらく人それぞれだと思いますが・・・）
<script type="text/javascript" src="/js/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$().ready(function() {
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url : '/js/tiny_mce/tiny_mce.js',
// General options
theme : "advanced",
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist,syntaxhl",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,sub,sup,forecolor,backcolor",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,code,|,insertdate,inserttime,preview,|,syntaxhl",
theme_advanced_buttons3 : "justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,|,emotions,fullscreen,<span>aaaa</span>",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
extended_valid_elements : "textarea[cols|rows|disabled|name|readonly|class]",
上記のハイライトされている部分を追加するということですね。
10,14行目の一番最後に「syntaxhl」を追加。
23行目は一行すべて追加しました。
あくまで僕の場合ですが。。。
–その他にもう一つ参考にさせていただいたサイト–
[Blood Bugs Web Service & API]tinyMCEで使用可能なSyntaxhighlighter