{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/resaltar-codigo-con-gatsby-y-markdown/","result":{"data":{"markdownRemark":{"id":"92cf7706-4303-58db-876e-77e2991cdc7c","html":"

Si ya leiste mi post anterior, sabes que estoy intentando hacer un blog generado estáticamente(los posts no se almacenan en bases de datos, sino que son archivos planos) para publicar las cosas que se me ocurran. Bueno, pues una de las cosas que normalmente se me ocurren publicar estan relacionadas con el mundo de la programación y con este tipo de contenido se requiere de compartir fragmentos de código relacionados al post, lo cual en realidad nos trae a este post.

\n

Despues de configurar mi entorno de trabajo para Gatsby siguiendo el tutorial del sitio web de Gatsby, lo siguiente que hice fue instalar un nuevo plugin que me permitiera resaltar la sintaxis del código en mis posts, el plugin lo puedes encontrar en esta enlace, la verdad es que no tuve que hacer mucho, simplemente seguí los pasos ahi descritos:

\n
    \n
  1. Instalar el plugin
    2. \n
\n
npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs
\n
    \n
  1. \n

    Editar el archivo gatsby-config.js

    \n
    plugins: [\n{\nresolve: `gatsby-transformer-remark`,\noptions: {\n  plugins: [\n    {\n      resolve: `gatsby-remark-prismjs`,\n      options: {\n        classPrefix: \"language-\",\n        inlineCodeMarker: null,\n        aliases: {},\n        showLineNumbers: false,\n        noInlineHighlight: false,\n        languageExtensions: [\n          {\n            language: \"superscript\",\n            extend: \"javascript\",\n            definition: {\n              superscript_types: /(SuperType)/,\n            },\n            insertBefore: {\n              function: {\n                superscript_keywords: /(superif|superelse)/,\n              },\n            },\n          },\n        ],\n        prompt: {\n          user: \"root\",\n          host: \"localhost\",\n          global: false,\n        },\n      },\n    },\n  ],\n},\n},\n]
    \n
    2. \n
  2. \n

    Incluir el css en el archivo gatsby-browser.js

    \n
    require(\"prismjs/themes/prism-solarizedlight.css\")
    \n
    3. \n
\n

Y listo, como pudiste ver en los fragmentos de código anteriores ya tenemos resaltado de la sintaxis. De ahora en adelante todo lo que escriba con formatos de código en mis post con extension .md se van a mostrar con sintaxis resaltada. :)

","fields":{"slug":"/posts/resaltar-codigo-con-gatsby-y-markdown/","tagSlugs":["/tag/react/","/tag/gatsby/","/tag/git-hub-pages/"]},"frontmatter":{"date":"2019-11-01T22:12:03.284Z","description":"Si ya leiste mi post anterior, sabes que estoy intentando hacer un blog generado estáticamente(los posts no se almacenan en bases de datos, sino que son archivos planos) para publicar las cosas que se me ocurran. Bueno, pues una de las cosas que normalmente se me ocurren publicar estan relacionadas con el mundo de la programación y con este tipo de contenido se requiere de compartir fragmentos de código relacionados al post, lo cual en realidad nos trae a este post.","tags":["React","Gatsby","GitHub Pages"],"title":"Resaltar código con Gatsby y markdown","socialImage":"/media/image-2.jpg"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/resaltar-codigo-con-gatsby-y-markdown/"}}}