So-net無料ブログ作成
検索選択

SyntaxHighlighterの動きを確認してみる [雑記]

コードの表示にはなるべくSyntaxHighlighterを使うようにしているのだが,期待通りに表示されないことがあるので,いろいろ試してみる.

たとえば,前回javascriptのコードで,
var url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=' + city;

というのがあるのだが,これをSyntaxHighlighterで表示させると,こうなる(以下はスクリーンショットの画像).
スクリーンショット 2015-05-02 10.53.01.png
アンカータグが追加されてしまう.

auto-linksの設定が影響しているのかと思って,falseにしてみてもアンカータグは変わらない.

原因がわからない.

So-netブログでSyntaxHighlightを使う:おぼえがき:So-net blog
を参考にしてSo-netブログの設定を変えてみたのだが,それでも変わらない.

と思ってたら,記事の編集の,詳細設定に「URL自動リンク」というのがあって,リンクするになっていたのでリンクしないにしてみた.
どうやらこれが悪さをしていたようだ.
上記のブログで,「キーワード広告の表示が悪さをしている」って書いてあったのを読んでもしかしてと思ったら正解だった.うちはもとからキーワード広告はオフだったけど,似たような設定で探したら「URL自動リンク」に気がつけた.感謝.
毎回詳細設定で変更するのは面倒だ.
管理ページの[設定]->[記事の初期設定]->[URL自動リンク]に設定があるので,ここをリンクしないにしておく.

ちなみに,管理ページの[デザイン]->[テンプレート管理]->HTML編集のテンプレートは,こんな感じ.</body>の直前に以下のように挿入してる.
<!-- Syntax Highlighter -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" rel="stylesheet" type="text/css">
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
'applescript            http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js',
'actionscript3 as3      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js',
'bash shell             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js',
'coldfusion cf          http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js',
'cpp c                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js',
'c# c-sharp csharp      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js',
'css                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js',
'delphi pascal          http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js',
'diff patch pas         http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js',
'erl erlang             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js',
'groovy                 http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js',
'java                   http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js',
'jfx javafx             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js',
'js jscript javascript  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
'perl pl                http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js',
'php                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
'text plain             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js',
'py python              http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js',
'ruby rails ror rb      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js',
'sass scss              http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSass.js',
'scala                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js',
'sql                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js',
'vb vbnet               http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js',
'xml xhtml xslt html    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'
);
SyntaxHighlighter.all();
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['auto-links'] = false;
</script>
<style type="text/css">
/*--- Syntax Highlighter Scripts Generator 縦スクロールを出さない ---*/
.syntaxhighlighter {
overflow-y: hidden !important;
padding: 1px !important;
}
</style>
<!-- Syntax Highlighter -->

</body>


実際のSyntaxHighlighterの表示はこれ.
var url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=' + city;


これが(アンカータグがなくて)ちゃんと表示されていればOKのはず.

もし,困っている人がいたら参考になるかも.

nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:日記・雑感

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。