Форматирование фрагментов кода для ведения блога в Blogger

Я создал запись в блоге, в которой объясняется, как добавить подсветку синтаксиса кода в blogger с помощью подсветки синтаксиса 2.0.

Вот мой пост в блоге:

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

Я надеюсь, что это поможет вам, ребята. Я очень впечатлен тем, что он может сделать.

Ссылки выше перестали работать. Попробуйте использовать http://hilite.me/.

Самый простой способ поделиться кодом — сделать его общедоступным. Просто напишите один и вставьте код для вставки. Очень просто.

http://gist.github.com

Чтобы решить проблему с поисковой системой, можно использовать скрытый div на странице так же просто, как:

<div style="display:none"> content </div>

Для своего блога я использую http://hilite.me/ для форматирования исходного кода. Он поддерживает множество форматов и выводит довольно чистый html. Но если у вас много фрагментов кода, вам придется много копировать и вставлять. Для форматирования кода Python я также использовал Pygments (запись в блоге).

Этот css-скрипт может быть полезен всем — он не предназначен для подсветки синтаксиса, но хорошо работает для представления исходного кода в исходном формате:

 <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

            <<<<<<<YOUR CODE HERE>>>>>>>

       </code>
 </pre>

Как использовать:

1. Вставьте этот фрагмент в текстовый редактор,
2. вставьте свой код в блок ‹‹‹‹‹‹>>>>>>.
3. Скопируйте все и
4. вставить в HTML-представление в блоггере (или любом другом) редакторе сообщений.

ПРЕИМУЩЕСТВА: простота и удобство использования, меньше настроек, простота перенастройки, отсутствие дополнительного программного обеспечения.

Это можно сделать довольно легко с помощью SyntaxHighlighter. У меня есть пошаговые инструкции для Настройка SyntaxHighlighter в Blogger в моем блоге. SyntaxHighlighter очень прост в использовании. Он позволяет публиковать фрагменты в необработанном виде, а затем заключать их в pre блоки, например:

<pre name="code" class="brush: erlang"><![CDATA[
-module(trim).

-export([string_strip_right/1, reverse_tl_reverse/1, bench/0]).

bench() -> [nbench(N) || N <- [1,1000,1000000]].

nbench(N) -> {N, bench(["a" || _ <- lists:seq(1,N)])}.

bench(String) ->
    {{string_strip_right,
    lists:sum([
        element(1, timer:tc(trim, string_strip_right, [String]))
        || _ <- lists:seq(1,1000)])},
    {reverse_tl_reverse,
    lists:sum([
        element(1, timer:tc(trim, reverse_tl_reverse, [String]))
        || _ <- lists:seq(1,1000)])}}.

string_strip_right(String) -> string:strip(String, right, $\n).

reverse_tl_reverse(String) ->
    lists:reverse(tl(lists:reverse(String))).
]]></pre>

Просто измените имя кисти на «python», «java» или «javascript» и вставьте код по вашему выбору. Тегирование CDATA позволяет вам помещать туда практически любой код, не беспокоясь об экранировании сущностей или других типичных неприятностях, связанных с ведением блога кода.

1. Сначала сделайте резервную копию своего шаблона blogger
2. После этого откройте свой шаблон blogger (в режиме редактирования HTML) и скопируйте все css указан в этой ссылке перед тегом </b:skin>
3. Вставьте следующий код перед </head> тег

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4. Вставьте следующий код перед тегом </body>.

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. Сохраните шаблон Blogger.
6. Теперь подсветка синтаксиса готова к использованию, вы можете использовать ее с тегом <pre></pre>.

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7. Вы можете экранировать свой код здесь.
8. Здесь приведен список поддерживаемых языков для < b><class> атрибут.

http://formatmysourcecode.blogspot.co.uk/ работает нормально, вы просто копируете, форматируете, вставляете назад.

Я использую довольно низкотехнологичное решение. Я форматирую код с помощью этого онлайн-инструмента для подсветки синтаксиса, а затем просто вставляю его в блог.

Вот один сайт, который отформатирует ваш код и выдаст HTML и даже включает встроенные стили для синтаксиса. раскраска. Может не сработать для всех ваших потребностей, но это хорошее начало. Я считаю, что он сделал источник доступным, если вы хотите его расширить:

Я создал инструмент, который выполняет свою работу. Вы можете найти его в моем блоге:

Бесплатный онлайн-раскрасчик кода C#

Помимо раскрашивания кода C#, инструмент также позаботится обо всех символах '‹' и '>', преобразуя их в '' и ''. Вкладки преобразуются в пробелы, чтобы они выглядели одинаково в разных браузерах. Вы даже можете сделать колоризатор встроенным в стили CSS, если вы не можете или не хотите вставлять таблицу стилей CSS в свой блог или веб-сайт.

Я использую SyntaxHighlighter в своем блоге на платформе Blogger. Сам сайт размещен на моем собственном сервере, а не на сервере Blogger (у Blogger есть возможность размещать сообщения на вашем собственном сайте по ftping), но наличие собственного домена и веб-хостинга стоит всего пару долларов в месяц.

Похоже, в SyntaxHighlighter 2.0 были внесены некоторые изменения, упрощающие использование с Blogger.

Существуют размещенные версии стилей и JavaScript по адресу: http://alexgorbatchev.com/pub/sh/

На самом деле я использовал (что еще ;-)) Vim для этого: у него есть "плагин" 2html. См. здесь.

Поэтому, когда я редактирую свой код, я просто преобразовываю его в HTML и вставляю результаты в HTML-редактор Blogger.

Примечание: это не такой красивый HTML (встроенный css был бы лучше), но он просто работает.

О: и у него есть файлы синтаксиса для нескольких языков, что делает его довольно полезным.

Конкретный ответ Emacs: Что касается блоггера, он позволяет использовать встроенный css. Проблема с маркерами на основе javascript заключается в том, что вам приходится жить с их цветовой схемой или реализовывать свою собственную. Но, как и я, если вы поклонник собственной цветовой схемы emacs, у вас есть гораздо лучший вариант. Я взломал пакет "htmlize.el" для emacs, чтобы добавить следующие четыре функции...

1. блог-htmlize-буфер
2. блог-htmlize-регион
3. блог-htmlize-buffer-with-linum
4. блог-htmlize-region-with-linum

Эти функции будут выводить готовый к копированию и вставке html (встроенный стиль) в новый буфер в emacs, который вы можете напрямую использовать в своем блоге. Вывод выглядит точно так же, как код в emacs (включая цветовую схему).

Вот ссылка на мой блог, где вы можете найти подробную информацию о том, как использовать "blog-htmlize.el" с emacs. Это также устраняет html-кодирование знаков «меньше» и «больше». И поскольку emacs выполняет всю подсветку и стилизацию, вам не нужно беспокоиться о том, поддерживает ли библиотека js язык ваших фрагментов кода, и вам не нужно вмешиваться в код вашего шаблона в blogger.

Вы можете найти файл elisp здесь (сохраните файл как < strong>blog-htmlize.el)

Я свернул свой собственный на F # (см. -formatting">этот вопрос), но он все еще не идеален (я просто делаю регулярные выражения, поэтому я не узнаю имена классов или методов и т. д.).

По сути, насколько я могу судить, редактор блоггера иногда съедает ваши угловые скобки, если вы переключаетесь между режимами Compose и HTML. Поэтому вам нужно вставить в режим HTML, а затем сохранить напрямую. (Возможно, я ошибаюсь, только что попробовал и, кажется, работает - зависит от браузера?)

Это ужасно, когда у тебя есть дженерики!

Чтобы опубликовать свой html, javascript,c# и java, вы должны преобразовать специальные символы в код HTML. как '<' как < и с '>' по > и т.д.

Добавьте эту ссылку Конвертер кода в iGoogle. Это поможет вам преобразовать специальные символы.

Затем добавьте новую версию SyntaxHighlighter 3.0.83, чтобы настроить свой код в Blogger. Но вы должны знать, как настроить синтаксическую подсветку в вашем шаблоне блоггера.