У меня есть небольшой блог на blogger.com, и я использую простой бесплатный шаблон, который я узнал там. Иногда я публикую фрагменты кода о моих выводах. Код получается отформатированным довольно уродливым способом. Я вижу, что у некоторых блоггеров у них есть модный шаблон для показа кода.
Где я могу найти такой шаблон для блоггера? Или что я могу сделать для достижения того же самого?
Спасибо, тЕ
Я должен регулярно вставлять фрагменты кода в 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/ для быстрого редактирования
Я изо всех сил пытался заставить 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">.
О, он поддерживает несколько языков и темы.
Вы можете использовать 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>
Вы можете увидеть пример мой блог
Вы также можете вставлять файлы из Bitbucket или Gists из Github:
Как сделать:
Bitbucket (только для нединамических представлений)
Gist (для нединамических представлений см. ниже для динамических просмотров)
Гист для динамических представлений Blogger
Обычно есть плагины для достижения того, что вы ищете (у 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
Большинство пользователей 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
Я использую библиотеку javascript syntaxhighlighter 3+. Я написал простой пост для блоггера, который является более оптимизированной конфигурацией.
http://modelarchitecture.blogspot.com/2013/12/configuring-javascript-syntaxhighligher.html
Я внедрил инструмент, который может форматировать ваш код и показывать его в блогере. Попробуйте здесь http://www.dukaweb.net/p/format-source-code.html.
Идея заключается в использовании тега <pre><code> и подсчета количества строк с помощью javascript
Вы можете использовать Google-Code-Prettify, который является модулем JavaScript и css файлом. Это может помочь вам в синтаксическом освещении ваших фрагментов кода. Многие крупные имена в веб-сфере используют Google-Code-Prettify для подсветки синтаксиса синтаксиса на своих веб-сайтах, например. code.google.com и даже stackoverflow.com. Ниже приведен метод для установки и использования Google-Code-Prettify в Blogger.