Friday, December 19, 2008

syntaxhighliter in blogger



проблема была в том что сервер, размещенную на котором css-ку syntaxhighliter'a я решил брать, отдавал всем mimetype text/plain вместо text/css, на что фф ругался в консоли:

Error: The stylesheet http://syntaxhighlighter.googlecode.com/svn-history/r55/tags/1.5.1/Styles/SyntaxHighlighter.css was not loaded because its MIME type, "text/plain", is not "text/css".

и работало оно не у всех и не всегда.
я поступил очень некрасиво и просто вставил содержимое css файла в шаблон. при этом я чувствую что должна быть возможность сделать все по-приличному, ведь там где я подсмотрел, оно работает:
http://72miles.com/blog/posts/spring-opensessioninviewinterceptor-opensessioninviewfilter-examples/

итого я сделал:
вставил в head в стили содержимое файла http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css

и вставил перед закрытием </body> немного скриптов:



<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shCore.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCSharp.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPhp.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJScript.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJava.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushVb.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushSql.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushXml.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushDelphi.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPython.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushRuby.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCss.js'/>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCpp.js'/>
<script class='javascript' type='text/javascript'>
//<![CDATA[
dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
//]]>
</script>



сам код, который требыется подсветить вставляется внутри тэга <pre> с прописыванием нужного языка:


<pre name="code" class="xml">
то что будет подсвечено
<pre>


причем, у всего что внитри, обязательно есть замена < и > на &lt и &gt соответственно, т.е. предыдущий код в html выглядел вот так:


<pre name="code" class="xml">
&lt;pre name="code" class="xml"&gt;
то что будет подсвечено
&lt;pre&gt;
<pre>


p.s. supported languages

2 comments:

  1. А если CSS-ку залить куда-нибудь типа гуглпейджесов, а в head подключить через url?
    ReplyDelete
  2. да, должно работать, я просто не хотел использовать дополнительный сервис)
    ReplyDelete