Озадачился я тут вопросом как вставить подсветку синтаксиса в шаблон 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.
p.s. Для примера, нижеследующий PHP-код в этом блоге, как раз подсвечивается с помощью highlight.js:
Красиво, читабельно, удобно. А главное - минимум трудозатрат, т.е. любой блоггер может добавить подсветку синтаксиса на страницы своего блога буквально в считанные минуты.
Highlight.js, как и другие подобные скрипты, использует вариацию тега pre, но в данном случае вместе с тегом code, и автоматически понимает язык выкладываемого кода:
<pre><code>...</code></pre>
Т.е. весь код, в котором нужно выполнить подсветку синтаксиса необходимо размещать на месте троеточия, внутри обертки из pre и code.
p.s. Для примера, нижеследующий PHP-код в этом блоге, как раз подсвечивается с помощью highlight.js:
<?php phpinfo(); ?>
Красиво, читабельно, удобно. А главное - минимум трудозатрат, т.е. любой блоггер может добавить подсветку синтаксиса на страницы своего блога буквально в считанные минуты.
блин в который раз на те же грабли
ОтветитьУдалитьполучается вот так
http://des1roer.blogspot.ru/2015/03/yii-debugger-3.html
подсвечивает свою строку и еще и показывается. что обязательно в хтмл прописывать все это? нет ли нативного решения чтобы можно было в тексте теги указывать?
можно https://highlightjs.org/usage/
ОтветитьУдалить