понедельник, 13 октября 2014 г.

Как вставить подсветку синтаксиса в шаблон Google Blogger?

Озадачился я тут вопросом как вставить подсветку синтаксиса в шаблон Google Blogger. Решение было найдено в виде highlight.js и Хостинг JavaScript-библиотек от Яндекс. В шаблон Google Blogger записываем следующие строки:

<!-- Code HighLight -->
<script src="http://yastatic.net/highlightjs/8.2/highlight.min.js"></script>
<link rel="stylesheet" href="http://yastatic.net/highlightjs/8.2/styles/github.min.css" />
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>

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


Highlight.js, как и другие подобные скрипты, использует вариацию тега pre, но в данном случае вместе с тегом code, и автоматически понимает язык выкладываемого кода:

<pre><code>...</code></pre>

Т.е. весь код, в котором нужно выполнить подсветку синтаксиса необходимо размещать на месте троеточия, внутри обертки из pre и code.

p.s. Для примера, нижеследующий PHP-код в этом блоге, как раз подсвечивается с помощью highlight.js:

<?php phpinfo(); ?>

Красиво, читабельно, удобно. А главное - минимум трудозатрат, т.е. любой блоггер может добавить подсветку синтаксиса на страницы своего блога буквально в считанные минуты.

2 комментария :

  1. блин в который раз на те же грабли
    получается вот так
    http://des1roer.blogspot.ru/2015/03/yii-debugger-3.html
    подсвечивает свою строку и еще и показывается. что обязательно в хтмл прописывать все это? нет ли нативного решения чтобы можно было в тексте теги указывать?

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