Come aggiungere l'evidenziazione del codice negli articoli Medium senza uscire dall'editor

Un'estensione del browser per Chrome e Firefox. Ti permette di creare e modificare GitHub Gists direttamente da Medium

Il modo attuale

Medium può visualizzare blocchi di codice sia in linea che multilinea. Nessuno di essi supporta l'evidenziazione della sintassi:


  
     Hello World 
  

Una soluzione alternativa consiste nell'incorporare GitHub Gist esistenti. Per fare ciò, è possibile utilizzare il pulsante "Aggiungi un incorporamento":

Dopo aver premuto il pulsante, incolla l'URL gist e premi Invio per aggiungerlo all'articolo:

È abbastanza fastidioso

Devi andare su GitHub per creare l'essenza:

  • Vai a GitHub
  • Crea l'essenza
  • Copia il suo URL
  • Torna a Medio
  • Incolla l'URL

E se poi ti rendessi conto di aver commesso un errore nel codice?

  • Torna a GitHub
  • Trova l'essenza corretta
  • Aggiornalo
  • Ritorno al mezzo
  • Aggiungi nuovamente l'essenza o ricarica la pagina

Questo diventa fastidioso quando crei molte novità per i tuoi articoli.

Un modo più semplice

C'è un modo per semplificarlo almeno un po '?

È vero, dobbiamo ancora usare l'essenza.

È vero, dobbiamo ancora ingombrare il nostro account GitHub con un numero infinito di essi.

Ma c'è un modo per rendere la creazione e l'aggiornamento delle sintesi un po 'più veloce o più facile?

La soluzione che ho trovato è Code Medium: un'estensione del browser per Chrome e Firefox.

Ti consente di creare e modificare le sintesi direttamente dall'editor Medio.

Codice medio

Aggiunge un pulsante nella barra degli strumenti di testo per creare una nuova sintesi:

Puoi anche fare doppio clic su un elemento esistente per modificarlo:

Puoi eliminare i gist esistenti dal tuo account premendo il pulsante "Elimina gist".

Basti dire che devi possedere l'essenza per poterlo fare :)

NOTA: l'estensione utilizza l'API GitHub Gist. Pertanto, devi accedere con il tuo account GitHub. Un pulsante di accesso verrà visualizzato la prima volta che si utilizza l'estensione.

Installandolo

Puoi installarlo dal web store:

  • Cromo
  • Firefox

L'estensione è open source, puoi trovare il codice sorgente su GitHub.

Sintesi multi-file

In GitHub, una sintesi può contenere più di un file.

Un modo per semplificare ulteriormente l'esperienza sarebbe la creazione di una sintesi dedicata per ciascun articolo Medium.

Quindi aggiungere un nuovo file per ogni frammento di codice nell'articolo.

Ciò ridurrebbe il disordine nell'account GitHub.

Vorrei che fosse possibile.

Il mezzo utilizza Embedly per incorporare le sintesi ma non supporta l'incorporamento di un singolo file.

Se si tenta di incorporare un singolo file, includerà anche tutti gli altri file in sintesi.

Sembra che per il momento dobbiamo rinunciare a questa idea.

limitazioni

L'estensione ha un supporto limitato per le sintesi multi-file. Il motivo è mantenere l'interfaccia utente semplice per il caso d'uso più comune.

  • Attualmente è possibile creare solo sintesi a file singolo.
  • Quando si fa doppio clic su un file multi-file esistente, nel modale verrà visualizzato solo il primo file. Si noti che è ancora possibile modificare quel file o eliminare l'intero contenuto.

Qual è il prossimo

Per le prossime versioni voglio vedere di più su come funziona Medium sotto il cofano.

Esistono soluzioni alternative per incorporare un singolo file da una sintesi multi-file?

Medium supporta anche altri provider, come JSFiddle.

JSFiddle è "solo" utile per esempi HTML + CSS + JavaScript. Tuttavia, aggiungere il supporto per più provider sarebbe piuttosto interessante.

Fammi sapere con un commento se l'hai provato o qualcosa del genere, davvero. Ciao!