На момент написание этого сообщения, для подсветки кода у меня стоит решение от SyntaxHighlighter от Алексея Горбачёва. Но я решил от него отказаться и перейти на другое решение.
Почему я это сделал?
Ну во первых - я проанализировал время загрузки страницы блога - очень много уходит время на загрузку скриптов и стилей с сайта автора.
Во вторых я разобрался как хранить на сайте http://code.google.com. Об этом я напишу отдельно, но теперь я могу складывать там и таблицы стилей и файлы скриптов.
Ну и в третьих - следствие первого и второго. Чем больше страница грузит файлов с внешних источников, тем дольше она загружается. Если посмотреть всякие статьи по оптимизации работы сайта, то один из первых советов - количество внешних файлов и картинок должно быть минимально. Поэтому все настройки для блога я положу у себя в один файл.
Кстати, нашёл ещё одно решение для подсветки кода - от компании Google. Копировать себе текст не буду - прочитайте в другом блоге тут.
Я же за основу взял решение HIGHLIGHT.JS. Я взял упакованные библиотеки и разместил у себя (смотри третью причину ухода с библиотеки Горбачёва). Но для удобства я размещу остальные библиотеки у себя же.
Но если Вам надо подсветить только раз или два синтаксис, то проще будет воспользоваться инструментом раскраски исходного кода. Чуть позже я его размещу у себя - сейчас идёт тестирование.
Итак, подключаем решение от HIGHLIGHT.JS:
Определение языка, на котором написан фрагмент, делается с помощью довольно простой эвристики: программа пытается расцветить фрагмент всеми языками подряд, и для каждого языка считает количество подошедших синтаксически конструкций и ключевых слов. Для какого языка нашлось больше, тот и выбирается.
Можно использовать рекомендованные в HTML5 названия классов: "language-html", "language-php". Также можно назначать классы на элемент <pre>.
Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":
И теперь немного про настройку:
Собственно теперь самое противное - обойти предыдущие статьи и в них заменить конструкции кода, на нужные.
Кстати, можно подключать языки по отдельности. То есть если Вам не нужны все, то смысла подключать такой большой файл - он отсутствует. Поэтому, в зависимости от Ваших потребностей, вы можете подключить требуемый язык.
Для этого вместо конструкции:
Почему я это сделал?
Ну во первых - я проанализировал время загрузки страницы блога - очень много уходит время на загрузку скриптов и стилей с сайта автора.
Во вторых я разобрался как хранить на сайте http://code.google.com. Об этом я напишу отдельно, но теперь я могу складывать там и таблицы стилей и файлы скриптов.
Ну и в третьих - следствие первого и второго. Чем больше страница грузит файлов с внешних источников, тем дольше она загружается. Если посмотреть всякие статьи по оптимизации работы сайта, то один из первых советов - количество внешних файлов и картинок должно быть минимально. Поэтому все настройки для блога я положу у себя в один файл.
Кстати, нашёл ещё одно решение для подсветки кода - от компании Google. Копировать себе текст не буду - прочитайте в другом блоге тут.
Я же за основу взял решение HIGHLIGHT.JS. Я взял упакованные библиотеки и разместил у себя (смотри третью причину ухода с библиотеки Горбачёва). Но для удобства я размещу остальные библиотеки у себя же.
Но если Вам надо подсветить только раз или два синтаксис, то проще будет воспользоваться инструментом раскраски исходного кода. Чуть позже я его размещу у себя - сейчас идёт тестирование.
Итак, подключаем решение от HIGHLIGHT.JS:
- В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
- Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
- Ищем конструкцию </head> и над ней вставляем код:
<!-- HIGHLIGHT.JS BEGIN --> <link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/default.css"> <script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script> <!-- HIGHLIGHT.JS END-->
- Сохраняете шаблон
- Используя инструмент типа Quick Escape, экранируйте служебные символы. Нужно это для того, что бы не получить сообщение "Ваш код HTML не может быть принят: Недопустимый тег: LINK"
- Переключаетесь в режим "Изменить HTML"
- Вводите конструкцию <pre><code>...</code></pre>, где место троеточия вставляете код из пункта 1.
- Если необходимо переключаетесь в визуальный редактор. Стоит отметить что в визуальном редакторе вы будете просто видеть текст. А при просмотре уже всё будет нормально.
Это означает, что в коротких фрагментах высока вероятность ошибки, что периодически и случается. Чтобы указать язык фрагмента явно, надо написать его название в виде класса к элементу <code>:
<pre><code class="html">...</code></pre>
Язык: Bash
Язык: Erlang
Язык: Cs
Язык: Ruby
Язык: Diff
Язык: Rib
Язык: Rsl
Язык: Javascript
Язык: Lua
Язык: Css
Язык: Xml, HTML
Язык: Lisp
Язык: Profile
Язык: Java
Язык: Php
Язык: Haskell
Язык: 1c
Язык: Python
Язык: Smalltalk
Язык: Tex
Язык: Sql
Язык: Vala
Язык: Ini
Язык: Axapta
Язык: Perl
Язык: Scala
Язык: Cmake
Язык: Objectivec
Язык: Avrasm
Язык: Vhdl
Язык: Nginx
Язык: Erlang_repl
Язык: Django
Язык: Delphi
Язык: Vbscript
Язык: Mel
Язык: Dos
Язык: Apache
Язык: Cpp
Язык: Parser3
Язык: Go
<pre><code class="bash"> Тут разместите Ваш код</code></pre>
Язык: Erlang
<pre><code class="erlang"> Тут разместите Ваш код</code></pre>
Язык: Cs
<pre><code class="cs"> Тут разместите Ваш код</code></pre>
Язык: Ruby
<pre><code class="ruby"> Тут разместите Ваш код</code></pre>
Язык: Diff
<pre><code class="diff"> Тут разместите Ваш код</code></pre>
Язык: Rib
<pre><code class="rib"> Тут разместите Ваш код</code></pre>
Язык: Rsl
<pre><code class="rsl"> Тут разместите Ваш код</code></pre>
Язык: Javascript
<pre><code class="javascript"> Тут разместите Ваш код</code></pre>
Язык: Lua
<pre><code class="lua"> Тут разместите Ваш код</code></pre>
Язык: Css
<pre><code class="css"> Тут разместите Ваш код</code></pre>
Язык: Xml, HTML
<pre><code class="xml"> Тут разместите Ваш код</code></pre>
Язык: Lisp
<pre><code class="lisp"> Тут разместите Ваш код</code></pre>
Язык: Profile
<pre><code class="profile"> Тут разместите Ваш код</code></pre>
Язык: Java
<pre><code class="java"> Тут разместите Ваш код</code></pre>
Язык: Php
<pre><code class="php"> Тут разместите Ваш код</code></pre>
Язык: Haskell
<pre><code class="haskell"> Тут разместите Ваш код</code></pre>
Язык: 1c
<pre><code class="1c"> Тут разместите Ваш код</code></pre>
Язык: Python
<pre><code class="python"> Тут разместите Ваш код</code></pre>
Язык: Smalltalk
<pre><code class="smalltalk"> Тут разместите Ваш код</code></pre>
Язык: Tex
<pre><code class="tex"> Тут разместите Ваш код</code></pre>
Язык: Sql
<pre><code class="sql"> Тут разместите Ваш код</code></pre>
Язык: Vala
<pre><code class="vala"> Тут разместите Ваш код</code></pre>
Язык: Ini
<pre><code class="ini"> Тут разместите Ваш код</code></pre>
Язык: Axapta
<pre><code class="axapta"> Тут разместите Ваш код</code></pre>
Язык: Perl
<pre><code class="perl"> Тут разместите Ваш код</code></pre>
Язык: Scala
<pre><code class="scala"> Тут разместите Ваш код</code></pre>
Язык: Cmake
<pre><code class="cmake"> Тут разместите Ваш код</code></pre>
Язык: Objectivec
<pre><code class="objectivec"> Тут разместите Ваш код</code></pre>
Язык: Avrasm
<pre><code class="avrasm"> Тут разместите Ваш код</code></pre>
Язык: Vhdl
<pre><code class="vhdl"> Тут разместите Ваш код</code></pre>
Язык: Nginx
<pre><code class="nginx"> Тут разместите Ваш код</code></pre>
Язык: Erlang_repl
<pre><code class="erlang_repl"> Тут разместите Ваш код</code></pre>
Язык: Django
<pre><code class="django"> Тут разместите Ваш код</code></pre>
Язык: Delphi
<pre><code class="delphi"> Тут разместите Ваш код</code></pre>
Язык: Vbscript
<pre><code class="vbscript"> Тут разместите Ваш код</code></pre>
Язык: Mel
<pre><code class="mel"> Тут разместите Ваш код</code></pre>
Язык: Dos
<pre><code class="dos"> Тут разместите Ваш код</code></pre>
Язык: Apache
<pre><code class="apache"> Тут разместите Ваш код</code></pre>
Язык: Cpp
<pre><code class="cpp"> Тут разместите Ваш код</code></pre>
Язык: Parser3
<pre><code class="parser3"> Тут разместите Ваш код</code></pre>
Язык: Go
<pre><code class="go"> Тут разместите Ваш код</code></pre>
Можно использовать рекомендованные в HTML5 названия классов: "language-html", "language-php". Также можно назначать классы на элемент <pre>.
Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":
<pre><code class="no-highlight">...</code></pre>
И теперь немного про настройку:
- Изменение размера табуляции. Вы можете заменить символы TAB ('\x09'), используемые для отступов, на фиксированное количество пробелов или на отдельный <span>, чтобы задать ему какой-нибудь специальный стиль:
<script> hljs.tabReplace = ' '; // 4 spaces // ... or hljs.tabReplace = '<span class="indent">\t</span>'; hljs.initHighlightingOnLoad(); </script>
- Если вы используете другие теги для блоков кода, вы можете инициализировать их явно с помощью функции highlightBlock(code, tabReplace). Она принимает DOM-элемент с текстом расцвечиваемого кода и опционально - строчку для замены символов TAB. Например с использованием jQuery код инициализации может выглядеть так:
Если ваш блок кода использует <br> вместо переводов строки (т.е. если это не <pre>), передайте true третьим параметром в highlightBlock:$(document).ready(function() { $('pre code').each(function(i, e) {hljs.highlightBlock(e, ' ')}); });
$('div.code').each(function(i, e) {hljs.highlightBlock(e, null, true)});
- Размеченным классами элементам кода можно задать желаемые стили например так:
.comment { color: gray; } .keyword { font-weight: bold; } .python .string { color: blue; } .html .atribute .value { color: green; }
Так же можно использовать различные стили для отображения, для этого вместо строки:
Укажите один из доступных стилей:<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/default.css">
Стиль: Default
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/default.css">
Стиль: Dark
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/dark.css">
Стиль: FAR
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/far.css">
Стиль: IDEA
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/idea.css">
Стиль: Sunburst
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/sunburst.css">
Стиль: Zenburn
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/zenburn.css">
Стиль: Visual Studio
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/vs.css">
Стиль: Ascetic
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/ascetic.css">
Стиль: Magula
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/magula.css">
Стиль: GitHub
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/github.css">
Стиль: Brown Paper
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/brown_paper.css">
Стиль: School Book
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/school_book.css">
Стиль: IR Black
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/ir_black.css">
Собственно теперь самое противное - обойти предыдущие статьи и в них заменить конструкции кода, на нужные.
Кстати, можно подключать языки по отдельности. То есть если Вам не нужны все, то смысла подключать такой большой файл - он отсутствует. Поэтому, в зависимости от Ваших потребностей, вы можете подключить требуемый язык.
Для этого вместо конструкции:
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/highlight.pack.js"></script>
напишите один или несколько приведённых ниже языков:Язык: Bash
Язык: Erlang
Язык: Cs
Язык: Ruby
Язык: Diff
Язык: Rib
Язык: Rsl
Язык: Javascript
Язык: Lua
Язык: Css
Язык: Xml
Язык: Lisp
Язык: Profile
Язык: Java
Язык: Php
Язык: Haskell
Язык: 1c
Язык: Python
Язык: Smalltalk
Язык: Tex
Язык: Sql
Язык: Vala
Язык: Ini
Язык: Axapta
Язык: Perl
Язык: Scala
Язык: Cmake
Язык: Objectivec
Язык: Avrasm
Язык: Vhdl
Язык: Nginx
Язык: Erlang_repl
Язык: Django
Язык: Delphi
Язык: Vbscript
Язык: Mel
Язык: Dos
Язык: Apache
Язык: Cpp
Язык: Parser3
Язык: Go
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/bash.js"></script>
Язык: Erlang
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/erlang.js"></script>
Язык: Cs
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/cs.js"></script>
Язык: Ruby
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/ruby.js"></script>
Язык: Diff
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/diff.js"></script>
Язык: Rib
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/rib.js"></script>
Язык: Rsl
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/rsl.js"></script>
Язык: Javascript
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/javascript.js"></script>
Язык: Lua
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/lua.js"></script>
Язык: Css
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/css.js"></script>
Язык: Xml
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/xml.js"></script>
Язык: Lisp
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/lisp.js"></script>
Язык: Profile
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/profile.js"></script>
Язык: Java
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/java.js"></script>
Язык: Php
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/php.js"></script>
Язык: Haskell
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/haskell.js"></script>
Язык: 1c
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/1c.js"></script>
Язык: Python
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/python.js"></script>
Язык: Smalltalk
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/smalltalk.js"></script>
Язык: Tex
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/tex.js"></script>
Язык: Sql
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/sql.js"></script>
Язык: Vala
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/vala.js"></script>
Язык: Ini
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/ini.js"></script>
Язык: Axapta
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/axapta.js"></script>
Язык: Perl
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/perl.js"></script>
Язык: Scala
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/scala.js"></script>
Язык: Cmake
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/cmake.js"></script>
Язык: Objectivec
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/objectivec.js"></script>
Язык: Avrasm
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/avrasm.js"></script>
Язык: Vhdl
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/vhdl.js"></script>
Язык: Nginx
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/nginx.js"></script>
Язык: Erlang_repl
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/erlang_repl.js"></script>
Язык: Django
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/django.js"></script>
Язык: Delphi
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/delphi.js"></script>
Язык: Vbscript
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/vbscript.js"></script>
Язык: Mel
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/mel.js"></script>
Язык: Dos
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/dos.js"></script>
Язык: Apache
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/apache.js"></script>
Язык: Cpp
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/cpp.js"></script>
Язык: Parser3
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/parser3.js"></script>
Язык: Go
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/go.js"></script>
Комментариев нет:
Отправить комментарий