22 сентября, 2013

highlighter в блоггер, подсветка кода / Setup syntax highlighter on blogger

В общем потребовалось организовать подсветку кода различных яп в блоге, и по первому же запросу в google, быстро получил ответ на свой вопрос, собственно решил запостить решение тут, может кому нибудь понадобится.



Красиво расписал решение пользователь Mahesh Meniya, на stackoverflow. 
Делаю репост с дополнениями(переводом):


1. First, take backup of your blogger template2. After that open your blogger template (In Edit HTML mode) & copy the all css given in this link before</b:skin> tag

Идем в настройки блога-> изменить html, находим тег </b:skin> и перед ним вставляем css стиль, содержимое которого берем по ссылке http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css

3. Paste the followig code before </head> tag
 <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
Находим тег </head>, и перед ним вставляем содержимое. Также что бы не засорять код, можете добавить только необходимые скрипты. 

4. Paste the following code before </body> tag.

 <script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Находим тег </body> и перед ним вставляем вышеописанный код.
5. Save Blogger Template.
6. Now syntax highlighting is ready to use you can use it with <pre></pre>  tag.
<pre name="code">
...Your html-escaped code goes here...
</pre>
<pre name="code" class="php">
    echo "I like PHP";
</pre>
 Сохраняем шаблон! С установкой закончили, теперь можно подсветить код =).
Для подсветки, вставляем код который хотим подсветить в теги:
<pre name="code"></pre>
Также он имеет атрибут class,  для подсветки определенного языка программирования.
Ну и пример:












Названия классов можно глянуть в кодах java script, которые вы подключили, они находятся в конце скрипта:

dp.sh.Brushes.JScript.Aliases = ['js', 'jscript', 'javascript']; dp.sh.Brushes.Php.Aliases = ['php'];

Иногда требует обрезать теги, это можно сделать тут
Ну собственно и все, спасибо за внимание.

1 комментарий:

  1. Ах да, это лишь один из способов, существует огромное множество других. В интернете полно слухов о том, что подсветку можно осуществить, с помощью виджетов, но я не углублялся.

    ОтветитьУдалить