Code Blocks

While adding code blocks, ensure you set the correct language type. Sometimes adding placeholders breaks the language's syntax, in which case you'll have to set the language type to none to avoid warnings during builds.

Docusaurus - MDX

    ```graphql {2,5}
        query {
        // highlight-next-line
          authors (where: {articles: {rating: {_gt: 4}}}) {
            id
            name
            // highlight-next-line
            articles (where: {rating: {_gt: 4}}) {
              id
              title
              rating
            }
          }
        }
    ```

Result in UI

  query {
    authors (where: {articles: {rating: {_gt: 4}}}) {
      id
      name
      articles (where: {rating: {_gt: 4}}) {
        id
        title
        rating
      }
    }
  }

Supported Languages

• Docusaurus uses prisma under the hood for code-block syntax highlighting. Please refer to the supported languages here.
• By default prisma includes a few that are listed here. If any supported language is not listed here, please add it to additionalLanguages under prisma plugin in docusaurus.config.js.

Parsed literals

Sometimes we want to add links within codeblocks, the triple backtick syntax won't work in this case. Please use pre and code tags and use plain html within the code. To preserve indentation prefer string templates over \n, \t etc.

<div className="parsed-literal">
<pre>
<code>
{`{
  "table"  : `}<a href="#tablename">TableName</a>{`
  "column" : `}<a href="#pgcolumn">PGColumn</a>{`
}`}
</code>
</pre>
</div>

Why is it wrapped in a div with parsed-literal className?

Using html + string templates is a workaround, if markdown ever supports this or provides an alternative, it would be easy to find the respective usage and replace it. Nothing more :)

{
  "table"  : TableName
  "column" : PGColumn
}

tip

Please refer to docusaurus's Code Blocks Docs for further syntax and usage guidance.