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


Answers

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

http://gist.github.com

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

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

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

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

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

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




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

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







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

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

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




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

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

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

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




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

  1. блог-htmlize-буфер
  2. блог-htmlize-регион
  3. блог-htmlize-буфер с-Linum
  4. блог-htmlize-регион-с-Linum

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

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

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




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




1. Сначала сделайте резервную копию своего шаблона блогера
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. Вы можете избежать кода here .
8. Here приведен список поддерживаемых языков для атрибута <class> .




Links