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

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

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

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

10 55
javascript shared-hosting blogger blogspot prettify

10 ответов:

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

в этом случае, потому что blogger не позволяет нам ссылаться на таблицу стилей, мы просто вставляем 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 файлы в blogger, так что добавьте это к <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();
});

или якобы самый маленький domready когда-нибудь

и все готово :)

Edit:

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

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

  • на блоггер > макет > редактировать 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()'>
  • Нажмите кнопку "сохранить шаблон"
  • на Блоггер > Публикация > Новый Пост
  • сделать конечно, вы редактируете HTML, нажав на кнопку " редактировать HTML."В пустом поле попробуйте:

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

  • обратите внимание, если вы нажмете "предварительный просмотр" теперь вы увидите этот код только в черном цвете. Не волнуйтесь (пока).
  • Нажмите кнопку "опубликовать сообщение", а затем "просмотреть блог". Ваш код должен быть приукрашен.
41

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

добавить скрипт <head> раздел вашего шаблона блоггера и он будет работать на всех ваших сообщениях:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

подробнее здесь:http://code.google.com/p/google-code-prettify/wiki/GettingStarted

15

Это очень просто, чтобы добавить Google code prettifier в вашем блоггере.

просто включите нижеприведенную библиотеку javascript в свой блоггер непосредственно перед тегом.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

как на рисунке...

enter image description here

Теперь вы успешно добавили Google code prettifier в своем блоггере.

Теперь, если вы хотите вставить код в свой пост блоггера, добавьте код (html, css, php и т. д.), а затем вставьте этот код между .... метить.

 <pre class="prettyprint">...</pre>

или

<code class="prettyprint">...</code>

демонстрация google Prettify на Blogger

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

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

6

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

3

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

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

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

Ура.

2

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

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

1

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

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

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

для других языков перейти и скопировать скрипт: https://cdnjs.com/libraries/SyntaxHighlighter

enter image description here

<!-- 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>
1

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

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

перейдите в раздел блоггер тема и нажмите на редактировать HTML.. Затем добавьте Google принаряжать CDN к головному тегу 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 фрагмент кода.

0