Как показать фрагмент кода в блогах
У меня есть небольшой блог на 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
Ответ 7
Я использую библиотеку javascript syntaxhighlighter 3+. Я написал простой пост для блоггера, который является более оптимизированной конфигурацией.
http://modelarchitecture.blogspot.com/2013/12/configuring-javascript-syntaxhighligher.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.