難でもアリ: syntaxhighlighter

ラベル syntaxhighlighter の投稿を表示しています。すべての投稿を表示

2015年6月6日土曜日

syntaxhighlighterでのautoloader使用時の問題

以前、HTMLと他言語をsyntaxhighlighterで表示する方法

を投稿しましたがshAutoloader.jsを使用した場合に
syntaxhighlighter表示にならず、かなりハマりましました・・・

ならばautoloaderを使用しないようにしたら良いのですが
こちらは多数のshBrush.jsを使用する場合に重かったり
以前のIEでの表示問題があるようですね

しかしshBrush.jsは今のとこ4種類くらいしか使わない、IE11では動作してた
もうすぐEdgeだろう？などの理由でとりあえずautoloaderやめました

そのうち公式で修正が当たんないかなぁ～；

2015年6月3日水曜日

syntaxhighlighter htmlとの混合記載など

よく忘れそうな記載方法

・htmlと他言語の混合での表示

<pre class="brush: js; html-script: true">
<boby>
<div>Hi!</div>
</body>
<scrpit>ほげほげ</script>
</pre>

・タイトル部表示方法

<pre class="brush: js;" title="タイトル" >
</pre>

2015年6月2日火曜日

Bloggerでsyntaxhighlighter表示してみた

syntaxhighlighter version 3.0.83をdownload
落としてきたzipを解凍する
必要なcss(stylesフォルダ内の最低１つ以上)
必要なjs(scriptsフォルダ内)
- shCore.js(必須)
- shAutoloader.js(任意だが今回の例では必要)
- shBrushJScript.js(任意) 他にもcss php sql vb perl delphiと色々あるが必要分だけでok
cssとjsをGoogleDriveにUpload
（他にもupload先はGoogle Apps Site等でも可能そうですがとりあえず）
uploadしたファイルを共有します（オン･ウェブ上で一般公開）

Bloggerのテンプレートをhtmlで編集します。

    <head>の上部に記載（他のCSSより上）

<head>



</head>

    </body>の直前に記載


</body>

Bloggerのテンプレート保存をします
これでとりあえず完了です
あとは以下のようにhtmlコードを投稿してみます

<pre class="brush:html;" title="htmlサンプル">
<head>
<title>ほげほげ</title>
</head>
<body>

</body>
</pre>

classの値をbrush:js とすればJavaScriptでの表示になります
あとはuploadしたcssを細かく調整していくのみです
これが大変でした。。