Как показать фрагмент кода в блогах

У меня есть небольшой блог на blogger.com, и я использую простой бесплатный шаблон, который я узнал там. Иногда я публикую фрагменты кода о моих выводах. Код получается отформатированным довольно уродливым способом. Я вижу, что у некоторых блоггеров у них есть модный шаблон для показа кода.

Где я могу найти такой шаблон для блоггера? Или что я могу сделать для достижения того же самого?

Спасибо, тЕ

Ответы

Ответ 1

Я должен регулярно вставлять фрагменты кода в blogposts. Самый простой способ, который я нашел, - сохранить файл уценки в github, а затем скопировать фрагменты кода в блог. Он поставляется с полной подсветкой синтаксиса на выбранном вами языке. И нет плагинов и интуитивно понятный, простой в использовании.

Например, если вы пишете в Ruby, все, что вам нужно сделать, это написать этот

```ruby
  [Your ruby code goes here]
```

В качестве примера, это сообщение в блоге, которое я недавно выпустил с подсветкой синтаксиса http://blog.iron.io/2013/09/ironcast-1-introduction-to-ironworker.html

И это файл уценки, который соответствует сообщениям в блоге. https://github.com/iron-io/ironcasts-series-1/blob/master/Code-Snippets.md

PS: если вы хотите более быстрый способ редактировать свою уценку, я бы также предложил http://dillinger.io/ для быстрого редактирования

Ответ 2

Я изо всех сил пытался заставить SyntaxHighlighter работать долгое время (Chrome и Blogger выпускали ужасные прокручивающие div).

Наконец, я убедился в Google Code Prettify. Это кажется более прямым, чем SyntaxHighlighter, но отлично работает.

Все, что вам нужно знать, можно найти в README

Загрузите script в разделе <head> шаблона blogger:

<script language='javascript' type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' />
<script language='javascript'  type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js'/>

<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(prettyPrint);
</script>

Формат с использованием <pre class="prettyprint"> или <pre class="prettyprint lang-yaml">' или встроенный с <code class="prettyprint">.

О, он поддерживает несколько языков и темы.

Ответ 3

Вы можете использовать SyntaxHighlighter, автор предоставил размещенную версию, поэтому вам просто нужно перейти к шаблону своего блога, выбрать редактирование HTML и добавьте следующий код в начало страницы

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/>
<script type='text/javascript'>
  SyntaxHighlighter.all();
</script>

Вы можете увидеть пример мой блог

Ответ 4

Вы также можете вставлять файлы из Bitbucket или Gists из Github:

Как сделать:

Bitbucket (только для нединамических представлений)

  • Создайте Bitbucket, если у вас ее нет
  • Создайте репозиторий и нажмите свой код
  • Откройте один из ваших исходных файлов, например этот и нажмите на встраивание.
  • Скопируйте javascript на свой пост.

Gist (для нединамических представлений см. ниже для динамических просмотров)

  • Создайте Github, если у вас ее нет.
  • Перейдите в Gist и введите код в виде.
  • Создайте Gist, подобный этому один, и нажмите на embed.
  • Скопируйте javascript в свой пост.

Гист для динамических представлений Blogger

Ответ 5

Обычно есть плагины для достижения того, что вы ищете (у Wordpress есть тонны и тонны), но я не уверен в Blogger.

Возможно, вы можете использовать Javascript для выполнения того же самого действия; здесь пример: http://www.halhelms.com/blog/index.cfm/2008/12/11/Code-Formatting-in-Blog-Pages-with-jQuery

Или это: http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

Ответ 6

Большинство пользователей Blogger используют blockquote для показа кодов. Это очень неправильный подход. Blockquotes предназначены для показа приложений с разных веб-страниц, которые при использовании для кодов форматируют их в уродливый стиль. Используйте теги <pre> and <code> для отображения ваших кодов. Затем браузер отобразит ваши коды, как они предназначены. Здесь формат -

<pre>
<code>
your code goes here
</code>
</pre>

Подробнее о том, зачем использовать эти теги для blogger - http://www.howtokickblogger.com/2013/06/blockquote-code-or-pre-tag-for-blogger.html

Ответ 8

Я внедрил инструмент, который может форматировать ваш код и показывать его в блогере. Попробуйте здесь http://www.dukaweb.net/p/format-source-code.html.

Идея заключается в использовании тега <pre><code> и подсчета количества строк с помощью javascript

Ответ 9

Вы можете использовать Google-Code-Prettify, который является модулем JavaScript и css файлом. Это может помочь вам в синтаксическом освещении ваших фрагментов кода. Многие крупные имена в веб-сфере используют Google-Code-Prettify для подсветки синтаксиса синтаксиса на своих веб-сайтах, например. code.google.com и даже stackoverflow.com. Ниже приведен метод для установки и использования Google-Code-Prettify в Blogger.