Ho un piccolo blog su blogger.com e uso un semplice modello gratuito che ho trovato là fuori. Occasionalmente inserisco frammenti di codice sui miei risultati. Il codice viene formattato in un modo piuttosto brutto. Vedo là fuori che alcuni blogger hanno un modello elaborato per mostrare il codice.come mostrare lo snippet di codice nei blog
Dove trovo tale modello per blogger? O cosa posso fare per ottenere la stessa cosa?
Grazie, mE
devo inserire regolarmente frammenti di codice in blogposts. Il modo più semplice che ho trovato è quello di mantenere un file markdown su github e quindi copiare gli snippet di codice sul blog. Viene fornito con l'evidenziazione della sintassi completa nella lingua prescelta. E nessun plugin e intuitivo, facile da usare.
Ad esempio, se si scrive in Ruby, Tutto quello che dovete fare è scrivere questo
```ruby
[Your ruby code goes here]
```
A titolo di esempio, questo è un post sul blog di recente ho pubblicato con evidenziazione della sintassi http://blog.iron.io/2013/09/ironcast-1-introduction-to-ironworker.html
E questo è il file markdown che corrisponde ai post del blog. https://github.com/iron-io/ironcasts-series-1/blob/master/Code-Snippets.md
PS: se volete un modo più veloce per modificare il Markdown, Vorrei anche suggerire http://dillinger.io/ per la pubblicazione veloce
Puoi approfondire la parte "copia il frammento di codice sul blog" in dettaglio? – Suhas
@Suhas, quindi in pratica evidenzia lo snippet di codice nel tuo gist e poi copialo e incollalo in blogspot. Questo funziona perché la copia copia anche tutto l'html (che contiene l'evidenziazione) e quando html viene incollato in blogspot, verrà reso. – samol
pagina non disponibile – programtreasures
È possibile utilizzare SyntaxHighlighter, l'autore ha fornito una versione hosted in modo da avere solo per andare al tuo blog modello, scegliere Modifica HTML e aggiungere codice riportato di seguito all'inizio della pagina
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.all();
</script>
si può vedere ad esempio il my blog
Solo per riferimento, quella sintassi è evidenziata in un modo un pò brutto. Basta sottolineare l'ironia in un post su come risolvere tali cose. :) – cHao
di solito, ci sono plugin per ottenere quello che stai cercando (Wordpress ha tonnellate e tonnellate), ma non sono sicuro di Blogger.
Probabilmente si può usare Javascript per fare la stessa cosa; ecco un esempio: http://www.halhelms.com/blog/index.cfm/2008/12/11/Code-Formatting-in-Blog-Pages-with-jQuery
O questo: http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html
ho lottato cercando di ottenere SyntaxHighlighter a lavorare per un lungo periodo di tempo (Chrome e Blogger prodotte div scorrimento orribili).
Alla fine ho optato per Google Code Prettify. Sembra più semplice di SyntaxHighlighter, ma funziona alla grande.
Tutto quello che c'è da sapere può essere trovato nel README
caricare lo script nella sezione <head> del modello blogger:
<script language='javascript' type='text/javascript'
src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' />
<script language='javascript' type='text/javascript'
src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js'/>
<script type='text/javascript'>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(prettyPrint);
</script>
Il formato utilizzando <pre class="prettyprint"> o <pre class="prettyprint lang-yaml">' o in linea con <code class="prettyprint">.
Oh, supporta più lingue e themes.
È anche possibile incorporare i file da Bitbucket o Gists da Github:
Procedura:
Bitbucket (Solo per non dinamica visualizzazioni)
Gist (per viste non dinamiche.Vedi sotto per le viste dinamiche)
Gist per Blogger viste dinamiche
Grazie mille :) –
La maggior parte degli utenti di Blogger utilizzano blockquote per mostrare i codici. Il che è un approccio molto sbagliato. Le blockquotes sono pensate per mostrare gli esiti di pagine web diverse che, se utilizzate per i codici, li formattano con uno stile brutto. Utilizza i tag <pre> and <code> per mostrare i tuoi codici. Il browser mostrerà quindi i tuoi codici come sono destinati a. Ecco il formato -
<pre>
<code>
your code goes here
</code>
</pre>
Per saperne di più sul perché utilizzare questi tag per blogger - http://www.howtokickblogger.com/2013/06/blockquote-code-or-pre-tag-for-blogger.html
uso lo SyntaxHighlighter 3+ libreria javascript. Ho scritto un post semplice per blogger che è una configurazione più ottimizzata.
http://modelarchitecture.blogspot.com/2013/12/configuring-javascript-syntaxhighligher.html
ho implementato uno strumento che può formattare il codice e mostrarlo in Blogger. Provalo qui http://www.dukaweb.net/p/format-source-code.html.
L'idea è utilizzare <pre><code> tag e contare il numero di righe utilizzando JavaScript
È possibile utilizzare Google-Codice-Prettify che è il modulo JavaScript e file css. Questo può aiutarti a evidenziare la sintassi dei tuoi frammenti di codice. Molti grandi nomi della sfera web utilizzano Google-Code-Prettify per potenziare l'evidenziazione della sintassi nei loro siti web, ad es. code.google.com e persino stackoverflow.com. Ecco uno method for installing and using Google-Code-Prettify in Blogger.
Che ne dici di un collegamento a uno di questi blog con frammenti di codice di fantasia? –
possibile duplicato di [Come posso visualizzare meglio il codice sul mio blog di blogger?] (Http://stackoverflow.com/questions/1644201/how-can-i-display-code-better-on-my-blogger-blog) – paulmorriss
Ho lo stesso problema ma l'ho risolto osservando questo tutorial. –