Как использовать prettify с blogger/blogspot?

Я использую blogger.com для размещения некоторых текстов по программированию, и я бы хотел использовать prettify (то же, что и stackoverflow), чтобы красиво окрасить образцы кода.

Как установить префиксные скрипты в домен блога?
Было бы лучше (если это вообще возможно) связывать с общей копией где-нибудь?
У меня есть веб-пространство в другом домене. Это поможет?

Большое спасибо.

Ответы

Ответ 1

Когда вы создаете новую запись в блогере, вы получаете возможность использовать 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

вы можете поместить верхний код в свой макет 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>

Я решил не заменять событие onload для тела специально, вместо этого я использую новое событие DOMContentLoaded, которое старые браузеры не поддерживают, если вам нужна поддержка старого браузера, вы можете использовать любое другое событие загрузки для запуска prettyPrint, например jQuery:

jQuery(function($){
    prettyPrint();
});

или предположительно самый маленький domready ever

и сделанное:)

Edit:

as Lim H указал в комментариях, в случае, если вы используете динамические представления blogger (шаблоны ajax), тогда вам нужно использовать описанный здесь метод для привязки custom 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>

Ответ 2

Следующее работало для меня немедленно.

Перейдите в 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()'>
Нажмите "SAVE TEMPLATE"
Перейти в Blogger > Проводкa > Новое сообщение
Убедитесь, что вы редактируете HTML, нажав "Редактировать HTML". В пустом поле попробуйте:

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

Обратите внимание, что если вы нажмете "Предварительный просмотр", вы увидите этот код только черным цветом. Не волнуйтесь (пока).
Нажмите "PUBLISH POST", а затем "VIEW BLOG". Ваш код должен быть убран.

Ответ 3

В настоящее время Google-Code-Prettify имеет автозагрузчик script. Вы можете загрузить JavaScript и CSS для префикса через один URL.

Добавьте раздел script в <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

Ответ 4

Очень просто добавить в свой блоггер код 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 on Blogger

Также, пожалуйста, обратитесь к этой документации для добавления этого префитера Google в блоггер по следующей ссылке.

как добавить синтаксический ярлык для Blogger с помощью Google Prettify

Ответ 5

Взгляните на SyntaxHightlighter на http://alexgorbatchev.com/wiki/SyntaxHighlighter На этом сайте вы также можете найти инструкции о том, как использовать его на blogger.com, и сайт предлагает размещенную версию необходимых скриптов, поэтому вам не нужно размещать файлы где-то самостоятельно.

Ответ 6

Другим решением является использование библиотеки syntaxhighlighter 2.0 java script. Я использовал его в своем блоге, и, похоже, он работает неплохо.

Вот сообщение об этом:

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html текст ссылки

Приветствия.

Ответ 7

Не прямой ответ на ваш вопрос, но стоит рассмотреть GitHub. Вы можете получить бесплатную учетную запись и получить синтаксис "gists" , который вы можете предоставить и разместить на своей веб-странице.

Недостатком является то, что копия размещена на сайте Github, и если это так, то это тоже для вас.

Ответ 8

cdnjs, предоставляющий библиотеку " SyntaxHighlighter"

получил блоггер → шаблон → изменить шаблон добавить код ниже перед окончанием тега body и сохранить шаблон.
Я привел пример для python.
вы можете связать другие языки script с cdnjs. код подсветки синтаксиса

<pre class="brush: py">
    print("hello world")
</pre>

для других языков перейдите и скопируйте script: 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>

Ответ 9

Здесь - это решение, которое работает для меня. Поместите в <head>...</head> динамический HTML-блоггер:

<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    prettyPrint();
});
</script>