Как использовать prettify с блоггером /blogspot?
Я использую blogger.com для размещения некоторых текстов по программированию, и я хотел бы использовать prettify (такой же как stackru), чтобы красиво раскрасить примеры кода.
Как установить сценарии prettify в домен блога?
Было бы лучше (если это действительно возможно) сделать ссылку на общую копию где-нибудь?
У меня есть веб-пространство в другом домене. Это поможет?
Большое спасибо.
10 ответов
Когда вы делаете новую запись в блоггере, вы получаете возможность использовать 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></code> тег или <pre></pre> тег с именем класса "prettyprint", вы даже можете указать язык, как это "prettyprint lang-html"
так это может выглядеть так
<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>
или как это
<code class="prettyprint lang-html">
<!-- your code here-->
</code>
код, который вы вставили, должен быть очищен от HTML <и>, для этого просто вставьте ваш код здесь: http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process
Вы можете поместить верхний код в свой 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();
});
или предположительно самый маленький из когда-либо
и все готово:)
Редактировать:
как отметил 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">...</code></pre>
Следующее сработало для меня сразу.
- Перейдите в Blogger > Макет> Изменить HTML
- Скопируйте следующий фрагмент и вставьте его сразу после
<head>в поле "Редактировать шаблон":
фрагмент кода:
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
- После
</head>замещать<body>с<body onload='prettyPrint()'> - Нажмите "СОХРАНИТЬ ШАБЛОН"
- Перейдите в Blogger > Опубликовать> Новое сообщение
- Убедитесь, что вы редактируете HTML, нажав "Редактировать HTML". В пустом поле попробуйте:
<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>
- Обратите внимание, что если вы нажмете "Предварительный просмотр", вы увидите этот код только в черном цвете. Не волнуйся (пока).
- Нажмите "PUBLISH POST", а затем "ПОСМОТРЕТЬ БЛОГ". Ваш код должен быть предварительно подтвержден.
В настоящее время в Google-Code-Prettify есть скрипт автозагрузчика. Вы можете загрузить JavaScript и CSS для предварительного просмотра через один URL.
Добавьте скрипт в <head> раздел вашего шаблона Blogger, и он будет работать со всеми вашими сообщениями:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
Более подробно здесь: http://code.google.com/p/google-code-prettify/wiki/GettingStarted
Это очень просто добавить Google Prettifier код в вашем блоггере.
Просто включите приведенную ниже библиотеку javascript в свой блоггер непосредственно перед тегом.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
как на картинке ниже...
Теперь вы успешно добавили префтификатор кода Google в своем блогере.
Теперь, если вы хотите вставить код в ваше сообщение блоггера, добавьте код (html, css, php и т. Д.), А затем вставьте этот код между тегами....
<pre class="prettyprint">...</pre>
или же
<code class="prettyprint">...</code>
Демо-версия Google Prettify в Blogger
Также, пожалуйста, обратитесь к этой документации, чтобы добавить этот префтификатор Google к блоггеру по следующей ссылке.
Как добавить синтаксический маркер для Blogger с помощью Google Prettify
Взгляните на SyntaxHightlighter по адресу http://alexgorbatchev.com/wiki/SyntaxHighlighter На этом сайте вы также можете найти инструкции по его использованию на blogger.com, и на сайте предлагается размещенная версия необходимых сценариев, чтобы вы не могли Нужно разместить файлы где-то самостоятельно.
Другое решение - использовать библиотеку Java-сценариев syntaxhighlighter 2.0. Я использовал это в своем блоге, и это, кажется, работает довольно хорошо.
Вот пост об этом:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html текст ссылки
Приветствия.
cdnjs, предоставляющий библиотеку "SyntaxHighlighter"
добрался до blogger >> template >> отредактируйте шаблон, добавьте код ниже перед окончанием тега body и сохраните шаблон.
Я привел пример для Python.
Вы можете связать файлы скриптов на других языках из cdnjs.код подсветки синтаксиса
<pre class="brush: py">
print("hello world")
</pre>
для других языков перейдите и скопируйте скрипт: https://cdnjs.com/libraries/SyntaxHighlighter
<!-- syntax highlighter-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js'/>
<!-- for python -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>
<!-- include other languages like javascript, php -->
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Не прямой ответ на ваш вопрос, но стоит рассмотреть GitHub. Вы можете получить бесплатный аккаунт и получить синтаксис цветных "гист", которыми вы можете поделиться и разместить на своей веб-странице.
Недостатком является то, что копия размещена на сайте Github, и если она не работает, то она тоже для вас.
Я хочу поделиться с вами своим путем, потому что он прост и подвижен.
Зайдите в свою учетную запись blogger нажмите theme >> customize >> Advance >> Add CSS
затем вставьте ниже код CSS
code {
font-family: Courier, monospace;
color: #000;
background-color: #f8f9fa;
border: 1px solid #eaecf0;
border-radius: 2px;
padding: 1px 4px;
}
pre, .mw-code {
padding: 5px;
font-family: Courier, monospace;
font-size: inherit;
line-height: 1rem;
color: #000;
background-color: #f8f9fa;
border: 1px solid #eaecf0;
padding: 1em;
white-space: pre-wrap;
overflow-x: hidden;
word-wrap: break-word;
}
Чтобы заставить все работать, например:
To check the MX record of a domain <code> nslookup </code> (in windows):<br />
<pre>temp = foo
foo = bar
bar = temp
</pre>
Перейдите в раздел темы блоггера и нажмите "Изменить HTML". Затем добавьте CDN Google Prettify в заголовок HTML.
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
Затем включите тему для фрагмента кода ниже этого сценария. Я включил тему Пустыни.
<!--Desert theme-->
<style type='text/css'>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>Для больше тем, посетите здесь.. Украсьте темы
При создании сообщения измените режим редактирования с визуального на HTML и перейдите в то место, куда вы собираетесь добавить фрагмент кода. Затем включите код, как это.
<pre class="prettyprint">
<code class="language-html">
<!-- your code snippet -->
</code>
</pre>Вы можете изменить стиль кода, выбрав соответствующие языки html, css, php, javascript... Здесь я использовал фрагмент кода html.
Вот решение, которое работает для меня. Положить в <head>...</head> динамического блоггера HTML:
<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
prettyPrint();
});
</script>