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



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



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



есть ряд вопросов вокруг этой области на так, но я не мог найти ни одного, которые обращаются к этому вопросу напрямую.



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

577   16  

16 ответов:

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

вот мой блог:

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

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

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

http://gist.github.com

для решения проблемы с поисковой системой можно использовать hidden div на странице так:

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

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

этот 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-представление в Редакторе сообщений blogger (или любом другом).

преимущества : простой и простота в использовании, меньше конфигурации, легко перенастроить, без дополнительного программного обеспечения

Это можно сделать довольно легко с помощью 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. во-первых, сделайте резервную копию вашего шаблона блоггера
2. после этого откройте шаблон blogger (в режиме редактирования HTML) и скопируйте все css приведенный в этой ссылке до </b:skin> tag
3. вставьте следующий код перед </head> tag

<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. Сохранить Блогер Шаблон.
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>.

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

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

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

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

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

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

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

Бесплатный Онлайн C# Code Colorizer

помимо раскрашивания вашего кода C#, инструмент также заботится обо всех символах ' ', преобразуя их в '

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

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

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

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

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

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

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

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

вы можете найти файл elisp здесь (сохранить файл как блог-htmlize.Эл)

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

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

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

для публикации html, javascript, c# и java вы должны конвертировать специальные символы в HTML-код. как '<' Как &lt; и '>' до &gt; и электронной.Т.С..

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

затем добавить SyntaxHighlighter 3.0.83 новая версия для настройки вашего кода в blogger. Но вы должны знать, как настроить syntaxHighlighter в вашем шаблоне blogger.

Comments

    Ничего не найдено.