sarah11918
Creates and solves problems

Using Astro's Prism component to render Code snippets:

Note! "astro" is a language recognized by both Markdown and Prism. Since the code the example is trying to render below is JS, all the code examples you see use "js" as the code language. But, on this page, in order for *me* to render an example of Astro code that is rendering JavaScript, I'm actually using "astro" as the code language! 🤣

See the bottom of the page for an example of an Astro render.


    //Be sure to choose a prismjs theme and include the stylesheet link in <head>!
    //e.g. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism-tomorrow.css">
    //NB: The ` character needs to be escaped!
    <Prism lang="js" code={` 
    // In your gatsby-config.js
    plugins: [
      {
        resolve: \`gatsby-transformer-remark\`,
        options: {
          plugins: [
            \`gatsby-remark-prismjs\`,
          ],
        },
      },
    ],
    `}/>

renders as...

 
    // In your gatsby-config.js
    plugins: [
      {
        resolve: `gatsby-transformer-remark`,
        options: {
          plugins: [
            `gatsby-remark-prismjs`,
          ],
        },
      },
    ],

Code written between 2 markdown tags also works (no escape for single back ticks needed)


  <Markdown>
    ```js
      // In your gatsby-config.js
      plugins: [
        {
          resolve: `gatsby-transformer-remark`,
          options: {
            plugins: [
              `gatsby-remark-prismjs`,
            ],
          },
        },
      ],
    ```
  </Markdown>

Code passed in as a variable (defined in frontmatter) to code attribute of a Prism component


    <Prism lang="js"  code={codesnippet} />

Combined with the following Astro frontmatter...


---
import { Markdown } from 'astro/components';
import { Prism } from 'astro/components';
import BaseLayout from '../layouts/BaseLayout.astro';

let codesnippet = `
  // In your gatsby-config.js
    plugins: [
      {
        resolve: \`gatsby-transformer-remark\`,
        options: {
          plugins: [
            \`gatsby-remark-prismjs\`,
          ],
        },
      },
    ],
  `
---

also successfully renders as ... 


  // In your gatsby-config.js
    plugins: [
      {
        resolve: `gatsby-transformer-remark`,
        options: {
          plugins: [
            `gatsby-remark-prismjs`,
          ],
        },
      },
    ],

Rendering Astro Code

In order to show you Astro code, I use the language "astro" in both the Markdown "three tick" notation, and in a Prism component.

Here's my Astro new page template:

---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="New Page Template!">
  <main>
    <p>New page template!</p>
  </main>
</BaseLayout>

… and I’ve rendered it by typing this:


 <Markdown>
   ```astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    ---
    <BaseLayout title="New Page Template!">
      <main>
        <p>New page template!</p>
      </main>
    </BaseLayout>
    ```
</Markdown>

... or this

<Prism lang="astro" code={`
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    ---
    <BaseLayout title="New Page Template!">
      <main>
        <p>New page template!</p>
      </main>
    </BaseLayout>
`} />