Formattazione di frammenti di codice per il blog su Blogger [chiuso]

283

Il mio blog è ospitato su Blogger e inserisco spesso frammenti di codice in C/ C#/ Java/ XMLecc. Ma trovo che lo snippet venga "rovinato".

Esistono siti Web che potrei utilizzare per analizzare in anticipo lo snippet e ordinare la formattazione, convertire XML " <" in " &lt;" ecc.

Ci sono un certo numero di domande in quest'area su SO, ma non sono riuscito a trovare nessuna risposta diretta a questa domanda.

Edit:Per la risposta di @Rich , il sito afferma "Per visualizzare il codice formattato sul tuo sito, devi ottenere questo foglio di stile CSS e aggiungere un riferimento ad esso nella <head>sezione della tua pagina" . Questo è il problema: non puoi farlo su Blogger AFAIK.

formatting  blogs  blogger 
— rbrayb
fonte
3
Per visualizzare il codice formattato: Se stai usando Visual Studio, puoi copiare qualsiasi tipo di codice html / css / javascript / c # etc su blogger. Devi installare gli strumenti per la produttività di Visual Studio: per maggiori informazioni leggi: coding-issues.blogspot.in/2013/10/…
— Ranadheer Reddy,
Prova il plug-in Incolla come Visual Studio Code per Windows Live Writer per l'editor offline di Blogger. WYSIWYG! .
— Herohuyongtao,
Ti manca l'armadietto dei contenuti social come WordPress? ora è possibile aggiungere questo blogger troppo stackoverflow.com/questions/27619171/...
— craig LERR
1
È possibile utilizzare questo sito Web per ottenere il codice di evidenziazione della spinetta di codice per varie lingue. ti dà html puoi pubblicarlo nel tuo blog hilite.me
— Bhavikkumar
Puoi copiare il codice in intellij e incollarlo nel tuo blog. Funziona come un incantesimo per me nel mio blog - codetails.blogspot.com/2017/11/design-pattern-in-java.html
— user3871494

Risposte:

253

Ho creato un post sul blog che spiega come aggiungere l'evidenziazione della sintassi del codice a blogger utilizzando il sintassixighlighter 2.0

Ecco il mio post sul blog:

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

Spero che vi aiuti ragazzi .. Sono abbastanza impressionato da ciò che può fare.

— CraftyFella
fonte
2
Qualcuno può confermare se funziona ancora? Ho provato a incollare il tag script appena prima della </head>sezione e ho aggiunto anche il pre tag attorno al mio codice. Nessun cambiamento però.
— Arviman,
2
Ci ho passato un paio d'ore e non riesco proprio a farlo funzionare.
— thepaulpage
1
Non funziona bene con DYNAMIC view blogger, puoi fornire qualche alternativa? ecco il mio blog con visualizzazione dinamica satindersinght.blogspot.in
— Satinder singh
1
Sembra che al codice che dovresti copiare e incollare manchi qualcosa in alto, in particolare un tag <script>.
— John Little,
1
La risposta di Samuel è molto meglio. Non mi piace aggiungere così tanti javascript sul mio blog solo per una semplice evidenziazione della sintassi. Soprattutto le pagine che non hanno alcuna sintassi da evidenziare sono eccessive.
— divinedragon,
126

Il modo più semplice per condividere il codice è con un senso pubblico. Basta scriverne uno e incollarlo nel codice di incorporamento. Vai tranquillo.

http://gist.github.com

Per risolvere il problema del motore di ricerca, è possibile utilizzare nascosto divnella pagina semplice come:

<div style="display:none"> content </div>
— yodaisgreen
fonte
amico, dopo averlo usato per circa 20 minuti, non posso ringraziarti abbastanza! La migliore formattazione, nessun problema, tutto il codice è in un unico posto, i post sembrano semplicemente belli, la modifica di un post è incredibilmente facile poiché non mescoli il codice con il resto del post e non ti preoccupare mai di farlo qualcosa di stupido e perdere / deformare qualsiasi codice. Grazie amico!
— Elia Saounkine,
19
L'incorporamento è JavaScript, ci sono buone probabilità che sia invisibile cercare. Questo lo uccide praticamente per i post sul blog.
— James Moore,
6
Attualmente sto usando Gists ma probabilmente userò di nuovo SyntaxHighlighter. Non solo gli utenti utilizzano JavaScript (che li rende inaccessibili anche ai lettori RSS), ma rallentano anche il caricamento della pagina perché ogni elemento viene scaricato bloccando in sequenza il rendering. Non è una buona scelta.
— Tomasz Nurkiewicz,
Grazie! Mi hai reso felice. Condividerò semplicemente questo script per aggiungere gist al blogger: github.com/moski/gist-Blogger
— daniel.sedlacek
1
Questa idea funziona davvero bene! il risultato è proprio quello di cui ho bisogno; codice ben formattato ... ma non ci andrò. Preferirei che il mio post fosse completo da solo. Avere il codice, che fa parte del post, ospitato altrove e incluso tramite js, lo sconfigge!
— dade,
63

Per il mio blog utilizzo http://hilite.me/ per formattare il codice sorgente. Supporta molti formati e output HTML piuttosto pulito. Ma se hai molti frammenti di codice, devi fare molto copia incolla. Per la formattazione del codice Python ho anche usato Pygments ( post sul blog ).

— Samuel
fonte
Ho usato per usare hilite.me , ma ora preferisco dillinger.io
— GoYun.Info
Preferisco anche questo a gist.github. Nessun javascript e stile / css aggiuntivi richiesti. Grazie Signore.
— Prabowo Murti,
40

Questo script css potrebbe essere utile a tutti - Non è per l'evidenziazione della sintassi ma funziona bene per presentare il codice sorgente nel formato originale:

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

Come usare :

  1. Incolla questo snippet nell'editor di testo,
  2. incolla il tuo codice nel blocco <<<<<< >>>>>>.
  3. Copia tutto e
  4. incollare in visualizzazione HTML nell'editor di post di blogger (o in qualsiasi altro).

VANTAGGI: semplice e facile da usare, meno configurazione, facile da riconfigurare, nessun software aggiuntivo

— gtiwari333
fonte
1
La risposta più semplice e accurata secondo me. Basta creare un CSS interno e sei a posto.
— Rishik Mani,
funziona bene anche per me. soluzione semplice
— Hasitha,
15

Questo può essere fatto abbastanza facilmente con SyntaxHighlighter. Ho istruzioni passo-passo per l'impostazione SyntaxHighlighter in Blogger sul mio blog. SyntaxHighlighter è molto facile da usare. Ti consente di pubblicare frammenti in forma grezza e quindi avvolgerli in preblocchi come:

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

Basta cambiare il nome del pennello in "python" o "java" o "javascript" e incollare il codice desiderato. Il tagging CDATA ti consente di inserire praticamente qualsiasi codice senza preoccuparti della fuga di entità o di altri fastidi tipici del blog di codice.

— Alain O'Dea
fonte
1
Le tue istruzioni hanno funzionato meglio per me rispetto all'altra risposta principale. Nel caso in cui qualcuno si trovi a cercarli, ecco l'elenco dei pennelli raggruppati e dei loro alias.
— Scott,
13

1. Innanzitutto, esegui il backup del tuo modello di blogger
2. Successivamente, apri il tuo modello di blogger (in modalità Modifica HTML) e copia tutti i CSS forniti in questo link prima del </b:skin>tag
3. Incolla il codice seguente prima del </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. Incollare il codice seguente prima del </body>tag.

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. Salva modello di Blogger.
6. Ora l'evidenziazione della sintassi è pronta per l'uso, è possibile utilizzarla con il <pre></pre>tag.

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7. Puoi sfuggire al tuo codice qui .
8. Ecco un elenco della lingua supportata per l' <class>attributo.

— Mahesh Meniya
fonte
Un bel link. Sarebbe meglio se lo formattasse a colori! +1
— Gaʀʀʏ
@le_garry: grazie ho avuto qualche problema durante la formattazione dello snippet di codice, quindi non è a colori.
— Mahesh Meniya,
Vedi la risposta di gissolved. Il miglior evidenziatore che ho visto finora, e colora.
— Gaʀʀʏ
@le_garry Ohh stai prendendo in considerazione l'evidenziazione della sintassi in Blogger Funziona perfettamente con il colore. Ho frainteso che stai prendendo in considerazione la mia risposta Quindi, ero triste di aver avuto qualche problema ..
— Mahesh Meniya,
@MaheshMeniya ho seguito tutti i passaggi che hai scritto per la sintassi della sintassi, ma non funziona, c'è qualche idea in più su cosa mi sto perdendo?
— AA.SC
5

Uso una soluzione a bassa tecnologia. Formatto il codice usando questo strumento di evidenziazione della sintassi online , quindi lo incollo nel blog

— Phil Hale
fonte
Yup - tohtml è la soluzione raccomandata dal Wiki TechNet per incollare il codice!
— rbrayb,
@Phil Hale Non c'è alcun rientro in quello strumento
— user2771655
Questa è la migliore soluzione che ho trovato fino ad ora. Grazie
— Kinjal,
5

Ecco un sito che formatterà il tuo codice e sputerà html e include anche stili in linea per la colorazione della sintassi. Potrebbe non funzionare per tutte le tue esigenze, ma è un buon inizio. Credo che abbia reso disponibile la fonte se si desidera estenderla:

— Ricco
fonte
Non funziona più
— Ε Г И І И О
4

Ho creato uno strumento che porta a termine il lavoro. Lo puoi trovare sul mio blog:

Colorizer codice C # online gratuito

Oltre a colorare il codice C #, lo strumento si occupa anche di tutti i simboli '<' e '>' convertendoli in '& lt;' e "& gt;". Le schede vengono convertite in spazi per avere lo stesso aspetto in diversi browser. Puoi persino rendere il colorizer integrato negli stili CSS, nel caso in cui non sia possibile o non desideri inserire un foglio di stile CSS nel tuo blog o sito Web.

— Pavel Vladov
fonte
3

Uso SyntaxHighlighter con il mio blog basato su Blogger. Il sito reale è ospitato sul mio server piuttosto che su Blogger (Blogger ha un'opzione per inviare messaggi sul tuo sito), ma avere il tuo dominio e il tuo hosting web costa solo un paio di dollari al mese.

— Pete Kirkham
fonte
D'accordo: ci sono diverse opzioni se ospito il mio blog ma non sembra esserci molto supporto quando il blog è effettivamente ospitato da Blogger.
— rbrayb,
2

In realtà avevo usato (cos'altro ;-)) Vim per questo: ha un "plugin" da 2html. Vedi i documenti qui .

Quindi, mentre modifico il mio codice, lo converto in HTML e incollo i risultati nell'editor HTML di Blogger.

Nota: non è così bello HTML (il css incorporato sarebbe meglio), ma funziona.

Oh: e ha file di sintassi per diverse lingue che lo rendono piuttosto utile.

— Zsolt Botykai
fonte
1

Risposta specifica di Emacs: per quanto riguarda i blogger, consente i CSS in linea. Il problema con gli evidenziatori basati su JavaScript è che devi convivere con la loro combinazione di colori o implementare il tuo. Ma, come me, se sei un fan della tua combinazione di colori di emacs, hai un'opzione molto migliore disponibile. Ho hackerato il pacchetto "htmlize.el" per emacs per aggiungere le seguenti quattro funzioni ...

  1. blog-HTMLize-buffer
  2. blog-HTMLize-regione
  3. blog-HTMLize-buffer-con-linum
  4. blog-HTMLize-regione-con-linum

Queste funzioni produrranno html pronti per copia e incolla (inline style) in un nuovo buffer in emacs, che puoi usare direttamente nel tuo post sul blog. L'output ha lo stesso aspetto del codice in emacs (incluso lo schema dei colori).

Ecco un link al mio blog , dove puoi trovare informazioni dettagliate su come usare il "blog-htmlize.el" con emacs. Questo elimina la codifica html anche dei segni "minore di" e "maggiore di". E mentre emacs sta mettendo in evidenza tutta la messa in evidenza e lo stile, non devi preoccuparti se la libreria js supporta la lingua dei tuoi snippet, né devi immischiarti con il tuo codice modello in blogger.

Puoi trovare il file elisp qui (salva il file come blog-htmlize.el )

— Sujeet
fonte
0

Ho fatto il mio in F # (vedi questa domanda), ma non è ancora perfetto (faccio solo regexps, quindi non riconosco classi, nomi di metodi, ecc.).

Fondamentalmente, da quello che posso dire, l'editor di blogger a volte mangerà le tue parentesi angolari se passi dalla modalità Compose a quella HTML. Quindi devi incollare in modalità HTML quindi salvare direttamente. (Potrei sbagliarmi su questo, ho appena provato ora e sembra funzionare - dipende dal browser?)

È orribile quando hai i generici!

— Benjol
fonte
0

Per pubblicare i tuoi html, javascript, c # e java devi convertire caratteri speciali in codice HTML. come '<'come&lt; e '>'verso &gt;e ecc.

Aggiungi questo link Code Converter a iGoogle. Questo ti aiuterà a convertire i caratteri speciali.

Quindi aggiungi la nuova versione di SyntaxHighlighter 3.0.83 per personalizzare il tuo codice in blogger. Ma dovresti sapere come configurare la sintassiHighlighter nel tuo modello di blogger.

— Mdhar9e
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.