Com afegir ressaltat de codi en articles mitjans sense sortir de l'editor

Una extensió de navegador per a Chrome i Firefox. Us permet crear i editar els esborranys de GitHub directament a Mitjà

La forma actual

El mitjà pot mostrar blocs de codi tant en línia com en diverses línies. Cap d’ells admet el ressaltat de la sintaxi:

Hola món

Una solució consisteix a incrustar els continguts existents de GitHub. Per fer-ho, utilitzeu el botó "Incrusta":

Després de prémer el botó, enganxeu l'URL i premeu Retorn per afegir-lo a l'article:

És força molest

Heu d’anar a GitHub per obtenir la visió general:

  • Aneu a GitHub
  • Construeix el nucli
  • Copieu l'URL
  • Torna a significa
  • Enganxeu l'URL

Llavors, què passa si descobreix que va cometre un error al codi?

  • Torna a GitHub
  • Troba el nucli adequat
  • Actualitzeu-lo
  • Tornar als mitjans
  • Afegiu de nou el contingut o torneu a carregar la pàgina

Això resulta molest quan feu moltes llistes dels vostres articles.

Una manera fàcil

Hi ha alguna manera d'almenys simplificar-ho una mica?

És cert que encara hem d’utilitzar fantasmes.

És cert, encara hem de desordenar el nostre compte de GitHub amb una quantitat infinita d'ells.

Però hi ha alguna manera de fer que la creació i actualització de llistes sigui una mica més ràpida o senzilla?

La solució que em va sorgir és Code Medium: una extensió del navegador per a Chrome i Firefox.

Això us permet crear i editar llistes directament a l’editor mitjà.

Codi mitjà

S'afegeix un botó a la barra d'eines de text per crear contingut nou:

També podeu fer doble clic en una llista existent per editar-la:

Podeu eliminar les llistes existents del vostre compte fent clic al botó "Esborra la llista".

N’hi ha prou amb dir que per poder fer això, heu de posseir l’essencial :)

NOTA: l'extensió utilitza l'API GitHub Gist. Com a tal, haureu d’iniciar la sessió amb el vostre compte de GitHub. Si és la primera vegada que utilitzeu l'extensió, apareixerà un botó d'inici de sessió.

Instal·leu-lo

Podeu instal·lar-lo des de la botiga web:

  • crom
  • Guineu de foc

L'extensió és de codi obert, el codi font es pot trobar a GitHub.

Llistes de diversos fitxers

A GitHub, un resum pot contenir diversos fitxers.

Una manera de fer l'experiència encara més fàcil és crear un nucli separat per a cada article de Medium.

A continuació, afegiu un fitxer nou per a cada tros de codi de l'article.

Això disminuiria el desordre al compte de GitHub.

M’agradaria que fos possible.

Medium utilitza "incrustar" per incrustar llistes, però no admet incrustar cap fitxer.

Si intenteu incrustar un sol fitxer, tots els altres fitxers s’inclouran a la llista.

Sembla que per ara hem de renunciar a aquesta idea.

limitacions

L'extensió té una compatibilitat limitada amb els fitxers bàsics. El motiu d'això és mantenir la interfície d'usuari senzilla per al cas d'ús més comú.

  • Actualment només podeu crear llistes amb un fitxer.
  • Si feu doble clic a una llista existent de diversos fitxers, només es mostrarà el primer fitxer del modal. Tingueu en compte que encara podeu editar aquest fitxer o suprimir-ne tot el contingut.

Que segueix

A les properes versions, m’agradaria aprofundir en com funciona Medium sota el capó.

Hi ha una solució alternativa per incrustar un sol fitxer d'una llista de diversos fitxers?

Medium també admet altres proveïdors com JSFiddle.

JSFiddle "només" és útil per a exemples HTML + CSS + JavaScript. Tot i això, seria bastant interessant afegir assistència a més proveïdors.

Aviseu-me amb un comentari si realment ho heu provat. Adéu!