Когда вы делаете новую запись в блоггере, вы получаете возможность использовать HTML в своей записи и редактировать записи в блоге.
, введите http://blogger.com, затем войдите в систему, затем отправьте сообщения> Редактируйте сообщения> Изменить
затем поместите это вверху:
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}
</style>
Обратите внимание, что вы не должны использовать prettyPrint напрямую в качестве обработчика событий, это его смущает (см. readme для подробной информации). Вот почему мы передаем addLoadEvent функцию, которая затем поворачивается и вызывает prettyPrint.
В этом случае, поскольку блоггер не позволяет нам ссылаться на таблицу стилей, мы просто встраиваем содержимое prettify.css.
затем добавьте тег <code> или тег "prettyprint", вы даже можете указать язык, подобный этому "prettyprint lang-html"
так это может выглядеть вот так
<code><pre class="prettyprint lang-html">
<!-- your code here-->
или как это
<code class="prettyprint lang-html">
<!-- your code here-->
</code>
код, который вы вводите, должен быть очищен от HTML <и>
Для этого просто вставьте свой код здесь: http://www.simplebits.com/cgi-bin/simplecode.pl
вы можете поместить верхний код в макет HTML, чтобы он включался по умолчанию для всех страниц, если хотите.
обновление
Теперь вы можете связать CSS-файлы в блоггере,
так что добавления этого к <head> должно быть достаточно
<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function() {
prettyPrint();
});
</script>
Я решил не заменять событие body onload нарочно, вместо этого я использую новое событие DOMContentLoaded, которое старые браузеры не поддерживают, если вам нужна поддержка старого браузера, вы можете использовать любое другое событие загрузки для запуска prettyPrint например jQuery:
jQuery(function($){
prettyPrint();
});
или, предположительно, наименьшее количество в истории
и все готово:)
Edit:
, как указано Lim H в комментариях, в случае, если вы используете динамические представления блоггера (шаблоны ajax), вам необходимо использовать описанный здесь метод для привязки пользовательского javascript: prettyPrint ( ) не вызывается при загрузке страницы
Обновление 2017-06-04
Используйте руководство здесь https://github.com/google/code-prettify
В основном просто используйте это:)
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...