четверг, 21 июня 2018 г.

Оформление кода в блоге

Долго мучился с поиском более-менее удобного метода вставки блоков кода в данный блог.
Был неприятно удивлен отсутствием в принципе данной функции в механизме самого ресурса www.blogger.com.
Однако, решения есть. Но описание их настолько неоднозначное, что потратил пол дня, чтобы "методом тыка" добиться хоть какого-то результата.
Поэтому себе на память и всем, кто ищет решения аналогичной проблемы, излагаю рабочее решение (см.ниже).

1. Выбираете из выпадающего списка необходимый блог (тем, кто не знает - их может быть несколько):

2. В меню свойств (слева) выбираем раздел "Тема", а в ней (справа) нажимаем кнопку "Изменить HTML":
3. В открывшемся окне с HTML-кодом шаблона темы, которая будет применяться ко всем сообщениям в данном блоге, необходимо добавить стили и скрипты для обработки блоков текста, содержащие публикуемый код.
3.1. Сразу после тэга <title>[...]</title> (обязательно перед закрывающим тэгом </head>) вставляем ссылки на CSS-стили (где их взять - см.ниже):
<title><data:blog.pageTitle/></title>

 <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
 <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
3.2. Перед закрывающим тэгом </body> вставляем ссылки на необходимые JS-скрипты:
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'> </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js' type='text/javascript'> </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'> </script>
<script type='text/javascript'>
     SyntaxHighlighter.all();
</script>

</body>
Важно! Тэг <script> должен обязательно закрываться тэгом </script>, а так как сайт www.blogger.com самостоятельно удаляет закрывающий тэг, заменяя его короткой формой <script ....  />, если между открывающим и закрывающим тэгом ничего нет, то необходимо вставить пробел между ними (как в примере).
4. Использование.
4.1. В режиме HTML редактирования статьи (сообщения)

добавляем тэг <pre></pre> следующего содержания:
<pre class="brush: js">
. . .
</pre>
4.2. В имени класса, после двоеточия прописываем тип вставляемого кода - "js", как в данном примере, для кода JavaScript, "xml" - для кода XML, "java" - для кода на Java и т.д. Сокращения можно взять отсюда.
4.3. Между открывающим <pre> и закрывающим </pre> тэгами вставляем необходимый код.
Важно! Перед вставкой кода обязательно заменить угловые скобки на esc-последовательности. Для этого можно воспользоваться, например, данным сайтом (вставляете свой код, как он есть и нажимаете кнопку "Convert to esceped characters", копируете результат и его уже вставляете в HTML блога).

5. Ссылки на необходимые в п.3 стили и скрипты можно взять с данного сайта.
Ключевые стили - это shCore.css и shThemeDefault.css, как в примере и данном блоге. Можно поиграть с другими темами и выбрать другую понравившуюся. Также можно выбрать сжатые файлы стилей, соответственно, shCore.min.css и shThemeDefault.min.css.
На этом же сайте можно найти ссылки на необходимые скрипты (простые и сжатые) для обязательного shCore.js (или shCore.min.js), а также различных типов кода shBrushJScript.js и shBrushXml.js (как в примере - для JavaScript и XML кода), shBrushPython.js - для Python, shBrushPhp.js - для PHP и т.д.
Ссылки на файлы скриптов можно добавлять несколько, по необходимости - в зависимости от того, какие куски кода планируется постить в блоге.
Обязательно не забудьте поставить после ссылок на необходимые скрипты скрипт, непосредственно выполняющий преобразование стиля вставляемого кода:
<script type='text/javascript'>
     SyntaxHighlighter.all();
</script>

(☀) Пока писал этот блог, наткнулся на более элегантное решение - gist от github.com
Просто создаете на github.com (естественно, предварительно зарегистрировавшись) свой gist с необходимым кодом. После этого выбираете Embedded и копируете одну строку, которая будет выводить содержимое вашего кода, и вставляете ее в необходимое место своего блога (в режиме HTML):

Комментариев нет:

Отправить комментарий