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

Мой блог размещен в Blogger, и я часто публикую фрагменты кода в C/C#/Java/XML и т.д., но обнаружил, что фрагмент получает "искалеченный".

Существуют ли какие-либо веб-сайты, которые я мог бы использовать для предварительного разбора фрагмента и сортировки форматирования, преобразования XML "<" в "<" и т.д.

В этой области есть множество вопросов по этой области, но я не мог найти ответ на этот вопрос напрямую.

Edit: Для @Rich ответьте на сайт: "Чтобы отобразить отформатированный код на вашем сайте, вам нужно получить эту таблицу стилей CSS и добавить ссылку на это в разделе <head> на вашей странице". Это проблема - вы не можете сделать это в Blogger AFAIK.

Ответ 1

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

Здесь мое сообщение в блоге:

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

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

Ответ 2

Самый простой способ совместного использования кода - с публичной точки зрения. Просто напишите и вставьте код для вставки. Легкий peasy.

http://gist.github.com

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

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

Ответ 3

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

Ответ 4

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

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

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

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

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

Ответ 5

Это можно сделать довольно легко с помощью SyntaxHighlighter. У меня пошаговые инструкции по настройке SyntaxHighlighter в Blogger в моем блоге. СинтаксисHighlighter очень прост в использовании. Он позволяет отправлять фрагменты в необработанном виде и затем обертывать их в 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 позволяет вам размещать практически любой код там, не беспокоясь об эвакуации объекта или других типичных неприятностях в блогах.

Ответ 6

1. Сначала сделайте резервную копию своего шаблона Blogger
2. После этого откройте свой блоггерский шаблон (в режиме редактирования 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. Здесь - список поддерживаемых языков для атрибута <class>.

Ответ 7

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

Ответ 8

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

Ответ 9

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

Бесплатный графический редактор С#

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

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

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

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

Ответ 13

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

Ответ 14

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

Блог-htmlize-буфер
Блог-htmlize-область
Блог-htmlize-буфер с-Linum
Блог-htmlize-регион-с-Linum

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

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

Здесь вы можете найти elisp файл (сохраните файл как blog-htmlize.el)

Ответ 15

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

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

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

Ответ 16

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

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

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