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

283

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

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

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

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

formatting  blogs  blogger 
— rbrayb
источник
3
Чтобы отобразить отформатированный код: Если вы используете visual studio, вы можете скопировать любой код html / css / javascript / c # и т. Д. В блоггер. Вы должны установить инструменты для повышения производительности Visual Studio: для получения дополнительной информации читайте: coding-issues.blogspot.in/2013/10/…
— Ranadheer Reddy
Попробуйте подключить плагин Вставить код Visual Studio для Windows Live Writer для автономного редактора Blogger. WYSIWYG! ,
— herohuyongtao
Вам не хватает блокировщика социального контента, такого как WordPress? Теперь вы можете добавить это и в блоггер. stackoverflow.com/questions/27619171/…
— Крейг Лерр
1
Вы можете использовать этот веб-сайт для получения кода подсветки кода для различных языков. он дает вам HTML, вы можете опубликовать его в своем блоге hilite.me
— Bhavikkumar
Вы можете скопировать код в intellij и вставить в свой блог. Это работает для меня как очарование в моем блоге - codetails.blogspot.com/2017/11/design-pattern-in-java.html
— user3871494

Ответы:

253

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

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

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

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

— CraftyFella
источник
2
Кто-нибудь может подтвердить, если это все еще работает? Я попытался вставить тег script непосредственно перед </head>разделом и также добавил тег pre вокруг моего кода. Без изменений, хотя.
— arviman
2
Я потратил пару часов на это, и я не могу заставить это работать вообще.
— thepaulpage
1
Это не работает нормально для DYNAMIC view blogger, можете ли вы предоставить какую-либо альтернативу? вот мой блог с динамическим просмотром satindersinght.blogspot.in
— singh
1
Похоже, что в коде, который вы должны скопировать и вставить, отсутствует что-то сверху, в частности тег <script>.
— Джон Литтл
1
Самуил ответил намного лучше. Мне не нравится добавлять так много javascripts в мой блог просто для подсветки синтаксиса. Особенно страницы, которые не имеют какого-либо синтаксиса для выделения, являются излишним.
— Divinedragon
126

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

http://gist.github.com

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

<div style="display:none"> content </div>
— yodaisgreen
источник
чувак, после 20 минут использования я не могу тебя отблагодарить! Лучшее форматирование, без суеты, весь код в одном месте, посты выглядят просто красиво, редактирование поста невероятно легко, так как вы не путаете код с остальной частью поста и никогда не беспокоитесь о том, что делаете что-то глупое и потерять / неправильно отформатировать любой код. Спасибо мужчина!
— Элайджа Саункин
19
Код для вставки - это javascript, есть большая вероятность, что он невидим для поиска. Это в значительной степени убивает это для сообщений в блоге.
— Джеймс Мур
6
В настоящее время я использую gists, но я, вероятно, снова буду использовать SyntaxHighlighter. Не только гистологи используют JavaScript (что делает их недоступными и для читателей RSS), но и замедляют загрузку страниц, потому что каждая гистота загружается последовательно, блокируя рендеринг. Не очень хороший выбор.
— Томаш Нуркевич
Спасибо! Вы сделали мой день. Я просто поделюсь этим сценарием для добавления gist к
— блоггеру
1
Эта идея действительно работает отлично! результат - просто желание, в котором я нуждаюсь; красиво отформатированный код ... но я не буду с ним идти. Я бы предпочел, чтобы мой пост был завершен сам по себе. Наличие кода, являющегося частью поста, размещенного в другом месте и включенного через js, просто опровергает это!
— dade
63

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

— Самуил
источник
Раньше я использовал hilite.me , но теперь я предпочитаю dillinger.io
— GoYun.Info
Я также предпочитаю это gist.github. Не требуется JavaScript и дополнительный стиль / CSS. Спасибо, сэр.
— Прабово Мурти
40

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

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

— gtiwari333
источник
1
Самый простой и аккуратный ответ на мой взгляд. Просто создайте внутренний CSS, и все готово.
— Ришик Мани
работает хорошо для меня, а простое решение
— Хасита
15

Это может быть сделано довольно легко с 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
Ваши инструкции сработали для меня лучше, чем другой ведущий ответ. В случае, если кто-то обнаружит, что ищет их, вот список связанных кистей и их псевдонимов.
— Скотт
13

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

— Махеш Мения
источник
Хорошая ссылка. Было бы лучше, если бы он отформатировал его! +1
— Gaʀʀʏ
@le_garry: спасибо, я столкнулся с некоторой проблемой при форматировании фрагмента кода, поэтому он не цветной.
— Махеш Мения
Смотрите ответ от gissolved. Лучший маркер, который я когда-либо видел, и он делает цвет.
— Gaʀʀʏ
@le_garry Ооо, вы принимаете участие в выделении синтаксиса в Blogger. Он отлично работает с цветом. Я неправильно понимаю, что вы принимаете мой ответ Итак, мне было грустно, что у меня возникли некоторые проблемы ..
— Махеш Мения
@MaheshMeniya Я выполнил все шаги, которые вы написали для синтаксиса syntaxhighlighter, но он не работает, есть ли дополнительные мысли, что мне не хватает?
— AA.SC
9

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

— Gob00st
источник
Я использую это для своего блога. Для людей, которые любят цвета, это не цветовой код, хотя! Я люблю это просто и ясно.
— Аравинд
5

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

— Фил Хейл
источник
Да, tohtml - это решение, рекомендованное TechNet Wiki для вставки кода!
— rbrayb
@Phil Hale В этом инструменте нет отступа
— user2771655
Это лучшее решение, которое я нашел до сих пор. Спасибо
— Кинджал,
5

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

— Богатый
источник
Больше не работает
— Ε Г И І И О
4

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

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

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

— Павел Владов
источник
3

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

— Пит Киркхэм
источник
Согласитесь - у меня есть собственный выбор, если я размещаю свой собственный блог, но, похоже, поддержки нет, когда блог фактически размещается в Blogger.
— rbrayb
2

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

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

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

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

— Жолт Ботыкай
источник
1

Конкретный ответ 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 язык ваших фрагментов, и при этом вам не нужно вмешиваться в код вашего шаблона в блоггере.

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

— Sujeet
источник
0

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

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

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

— Benjol
источник
0

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

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

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

— Mdhar9e
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.