Cómo agregar resaltado de código en artículos medianos sin salir del editor

Una extensión de navegador para Chrome y Firefox. Le permite crear y editar GitHub Gists directamente desde Medium

La forma actual

Medium puede mostrar bloques de código en línea y multilínea. Ninguno de ellos admite resaltado de sintaxis:


  
     Hola mundo 
  

Una solución alternativa es incrustar GitHub Gists existentes. Para hacerlo, puede usar el botón "Agregar una inserción":

Después de presionar el botón, pegue la URL general y presione Entrar para agregarlo al artículo:

Es bastante molesto

Debes ir a GitHub para crear la esencia:

  • Ir a GitHub
  • Crea la esencia
  • Copie su URL
  • Regrese a Medio
  • Pega la URL

¿Qué pasa si luego te das cuenta de que cometiste algún error en el código?

  • De vuelta a GitHub
  • Encuentra la esencia correcta
  • Actualizarlo
  • Volver a medio
  • Vuelva a agregar la esencia o vuelva a cargar la página

Esto se vuelve molesto cuando creas muchas cosas para tus artículos.

Una manera más fácil

¿Hay alguna forma de simplificar esto al menos un poco?

Es cierto, todavía tenemos que usar lo esencial.

Es cierto que todavía tenemos que saturar nuestra cuenta de GitHub con una cantidad interminable de ellos.

Pero, ¿hay alguna manera de hacer que la creación y actualización de lo esencial sea un poco más rápido o más fácil?

La solución que se me ocurrió es Code Medium: una extensión de navegador para Chrome y Firefox.

Te permite crear y editar gists directamente desde el editor de Medium.

Código medio

Agrega un botón en la barra de herramientas de texto para crear una nueva esencia:

También puede hacer doble clic en una esencia existente para editarla:

Puede eliminar lo esencial de su cuenta presionando el botón "Eliminar lo esencial".

Basta decir que debes ser el dueño de la esencia para poder hacerlo :)

NOTA: La extensión usa la API GitHub Gist. Como tal, debe iniciar sesión con su cuenta de GitHub. Aparecerá un botón de inicio de sesión la primera vez que use la extensión.

Instalarlo

Puede instalarlo desde la tienda web:

  • Cromo
  • Firefox

La extensión es de código abierto, puede encontrar el código fuente en GitHub.

Lo esencial de múltiples archivos

En GitHub, una esencia puede contener más de un archivo.

Una forma de simplificar aún más la experiencia sería crear una esencia dedicada para cada artículo de Medium.

Luego agregaría un nuevo archivo para cada fragmento de código en el artículo.

Esto reduciría el desorden en la cuenta de GitHub.

Desearía que fuera posible.

Medium usa Embedly para incrustar gists pero no admite incrustar un solo archivo.

Si intenta incrustar un solo archivo, también incluirá todos los demás archivos en la esencia.

Parece que tenemos que renunciar a esta idea por el momento.

Limitaciones

La extensión tiene un soporte limitado para las esencias de múltiples archivos. La razón es mantener la interfaz de usuario simple para el caso de uso más común.

  • Actualmente solo puede crear listas de archivos individuales.
  • Al hacer doble clic en una lista de archivos múltiples existente, solo el primer archivo aparecerá en el modal. Tenga en cuenta que aún puede editar ese archivo o eliminar toda la esencia.

Que sigue

Para las próximas versiones, quiero ver más sobre cómo funciona Medium debajo del capó.

¿Hay alguna solución para incrustar un solo archivo desde una esencia de múltiples archivos?

Medium también es compatible con otros proveedores, como JSFiddle.

JSFiddle es "solo" útil para ejemplos de HTML + CSS + JavaScript. Aún así, agregar soporte para más proveedores sería bastante bueno.

Avísame con un comentario si realmente lo intentaste o algo. ¡Adiós!