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

282

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

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

Є багато питань навколо цієї області на SO, але я не міг знайти жодного, який би вирішив це питання безпосередньо.

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

formatting  blogs  blogger 
— rbrayb
джерело
3
Для відображення відформатованого коду: Якщо ви використовуєте візуальну студію, ви можете скопіювати будь-який тип коду html / css / javascript / c # тощо до блогера. Ви повинні встановити електроінструменти для продуктивності візуальної студії: для отримання додаткової інформації читайте: coding-issues.blogspot.in/2013/10/…
— Ranadheer Reddy
Спробуйте плагін Вставити як код візуальної студії для Windows Live Writer для офлайн редактора Blogger. WYSIWYG! .
— herohuyongtao
Вам не вистачає шафки соціального вмісту, як WordPress? Тепер ви можете додати це в блогером занадто stackoverflow.com/questions/27619171 / ...
— Craig LERR
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

Сподіваюся, це допоможе вам, хлопці. Я дуже вражений тим, що він може зробити.

— ХитрийФелла
джерело
2
Чи може хтось підтвердити, чи це все-таки працює? Я спробував вставити тег сценарію перед </head>розділом і також додав попередній тег навколо мого коду. Жодних змін, хоча.
— arviman
2
Я витратив на це пару годин, і я взагалі не можу змусити це працювати.
— thepaulpage
1
Не працює нормально для блогера DYNAMIC View, чи можете ви надати будь-яку альтернативу? ось мій блог з динамічним виглядом satindersinght.blogspot.in
— Satinder singh
1
Схоже, що в коді, який ви повинні скопіювати і вставити, у верхній частині відсутнє щось, зокрема тег <script>.
— Джон Малий
1
Відповідь Самуїла набагато краща. Мені не подобається додавати стільки яваскриптів у мій блог лише для виділення синтаксису. Тим більше, що сторінки, які не мають синтаксису для висвітлення, є надлишком.
— divinedragon
126

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

http://gist.github.com

Для вирішення проблеми пошукової системи можна використовувати приховані divна сторінці такі ж прості, як:

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

Для свого блогу я використовую http://hilite.me/ для форматування вихідного коду. Він підтримує безліч форматів і виходів досить чистих HTML. Але якщо у вас є багато фрагментів коду, вам доведеться зробити багато копіювальної пасти. Для форматування коду Python я також використовував Pygments ( повідомлення в блозі ).

— Самуїл
джерело
Раніше я використовував hilite.me , але зараз я віддаю перевагу dillinger.io
— GoYun.Info
Я також віддаю перевагу цьому gist.github. Не потрібно JavaScript та додатковий стиль / css. Дякую вам сер.
— Prabowo Murti
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. Вставте код followig перед </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: спасибі, я зіткнувся з деякою проблемою під час форматування фрагмента коду, щоб він не був кольоровим.
— Махеш Менія
Дивіться відповідь gisssol. Найкращий хайлайтер, який я бачив досі, і це колір.
— Gaʀʀʏ
@le_garry О, ви берете про виділення синтаксису в Blogger. Це прекрасно працює з кольором. Я неправильно розумію, що ви ставитесь до моєї відповіді. Отже, мені було сумно, що я зіткнувся з якоюсь проблемою ..
— Махеш Менія
@MaheshMeniya я дотримувався всіх кроків, які ви написали для синтаксису syntaxhighlighter, але він не працює, чи є додаткові думки, чого мені не вистачає?
— AA.SC
9

http://formatmysourcecode.blogspot.co.uk/ працює чудово, ви просто скопіюйте, відформатуйте, вставте назад.

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

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

— Філ Хейл
джерело
Yup - tohtml - це рішення, рекомендоване TechNet Wiki для вставки коду!
— rbrayb
@Phil Hale У цьому інструменті немає відступів
— user2771655
Це найкраще рішення, яке я знайшов досі. Дякую
— Kinjal
5

Ось один веб-сайт, який буде форматувати ваш код і випльовувати HTML, і він навіть включає вбудовані стилі для синтаксичного забарвлення. Може не працювати на всі ваші потреби, але це хороший початок. Я вважаю, що він зробив доступне джерело, якщо ви хочете розширити його:

— Багатий
джерело
Більше не працює.
— Ε Г І І І О
4

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

Безкоштовний онлайн-розрядник C # Code

Окрім розфарбовування коду C #, інструмент також піклується про всі символи '<' та '>', перетворюючи їх у '& lt;' та '& gt;'. Вкладки перетворюються на пробіли для того, щоб вони виглядали однаково в різних браузерах. Ви навіть можете зробити колоризатор вбудованим стилями CSS, якщо ви не можете чи не хочете вставити аркуш стилів CSS у свій блог чи веб-сайт.

— Павло Владов
джерело
3

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

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

Насправді я для цього використовував (що ще ;-)) Vim: у нього є 2html "плагін". Дивіться документи тут .

Оскільки я редагую свій код, я просто перетворюю його в HTML і вставляю результати в редактор HTML Blogger.

Примітка: це не такий гарний HTML (вбудований css був би кращим), але він просто працює.

Ох: у нього є синтаксичні файли для декількох мов, що робить його досить корисним.

— Zsolt Botykai
джерело
1

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

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

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

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

Ви можете знайти файл elisp тут (збережіть файл як blog-htmlize.el )

— Sujeet
джерело
0

Я розгорнув свою власну у F # (див. Це питання), але вона все ще не ідеальна (я просто роблю регулярні вирази, тому я не розпізнаю назви класів чи методів тощо).

В основному, з того, що я можу сказати, редактор блогерів іноді їсть ваші кутові дужки, якщо ви переходите між режимом Compose та HTML. Тому вам потрібно вставити в режим HTML, а потім зберегти безпосередньо. (Я можу помилятися з цим, просто спробував зараз, і, здається, працює - залежно від браузера?)

Це жахливо, коли ти маєш дженерики!

— Бенжол
джерело
0

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

Додайте це посилання Конвертер кодів в iGoogle. Це допоможе вам перетворити спеціальні символи.

Потім додайте SyntaxHighlighter 3.0.83 нову версію, щоб налаштувати свій код у Blogger. Але ви повинні знати, як налаштувати syntaxHighlighter у своєму блогерському шаблоні.

— Mdhar9e
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.