Prima o poi dovrò decidermi a riscrivere completamente il codice del mio blog. Due anni fa sono passato da WordPress a Jekyll: è stata una buona scelta. Ma più approfondisco Svelte più sono curioso di vedere cosa posso tirare fuori. L’ultima cosa su cui mi sono appassionato è sul come mostrare snippet di codice in Svelte. Con mio stupore non pare un argomento molto approfondito, ma penso di aver trovato 4 modi che possono fare al mio caso.
PrismJS e Svelte
Il primo metodo prevede di usare Prismjs direttamente in una pagina in formato Markdown. Come esempio uso il mio template MEMENTO - SvelteKit & GitHub Pages. In questo progetto le pagine del blog sono dei file md (markdown). Ogni pagina nella cartella blog è per l’appunto un post di un ipotetico blog. E la scrittura del codice avviene usando quello che viene chiamato code fencing:
Quello che voglio ottenere è far si che il codice venga visualizzato in maniera simile a questa:
Come fare? Per prima cosa importo Prism nel mio template usando:
npm i -D prismjs
Posso usarlo direttamente in un file Svelte ma conviene inserirlo una sola volta, nel file __layout__: in questo modo ogni pezzo di codice apparirà alla stessa maniera in ogni pagina del blog.
In base al tema del blog posso decidere se cambiare il tema utilizzato per mostrare i codici. Posso anche usare un tema personalizzato, magari il Dracula. Per usarlo importo prism-themes con il comando:
npm i -D prism-themes
e quindi importo il tema nel file con:
import "prism-themes/themes/prism-dracula.css";
Svelte-Prism
Il secondo metodo è utilizzare un componente Svelte: svelte-prism. Questo componente di Jakob Rosenberg è molto comodo se si lavora all’interno di un file con estensione .svelte. Perché? Perché in questo caso non posso usare la sequenza di 3 backtick.
Per prima cosa installo il componente con:
npm i -D svelte-prism
Poi importo il componente dove mi serve:
Il risultato finale è pressoché identico al primo esempio:
Mostrare GitHub Gist in Svelte con easy-gist-async
Il terzo metodo è di usare i GitHub Gist per mostrare i vari snippet di codice. Il vantaggio è la possibilità di mostrare qualcosa di molto più bellino e ben curato. Lo svantaggio principale è che il codice da mostrare vive al di fuori del post: rende un po’ più complicato modificarlo e consultarlo offline.
Normalmente sarebbe sufficiente creare un Gist e poi copiare il codice di importazione con il pulsante in alto a destra
Il problema qual è? Che il codice da usare è in questo formato:
<script src="https://gist.github.com/el3um4s/b2ce146321ba67d7420f2a14f1a38544.js"></script>
Si tratta di aggiungere un altro script js in una pagina (o componente) Svelte. Ma Svelte accetta solamente un elemento di tipo Script per componente. Occorre di conseguenza creare un nuovo componente.
Ho trovato due modi per farlo. Il primo prevede di usare il pacchetto npm easy-gist-async. Ovviamente lo installo con
npm i -D easy-gist-async
Poi creo un componente AsyncGist.svelte:
E quindi uso il mio nuovo componente nella mia pagina:
Il risultato dipende molto dallo stile della pagina in cui viene importato il componente. Può essere una cosa buona per personalizzare l’aspetto ma per quello che serve a me è più un fastidio.
Usare Gist.svelte
L’ultimo modo è una mia rielaborazione di questo svelte.dev/repl. L’idea alla base è di creare un frame HTML attorno allo script importato: in questo modo vengono mantenuti gli stili originali. Rispetto al codice originale ho aggiunto un meccanismo per variare la grandezza del frame in base al contenuto. Penso sia più comodo e più utile.
Creo quindi il componente Gist.svelte:
e lo uso nella mia pagina:
Il risulto che ottengo è
Per finire
Per finire posso mettere tutte queste tecniche una dopo l’altra e ottengo
