mirror of
https://github.com/hasura/graphql-engine.git
synced 2025-01-07 08:13:18 +03:00
659b340ffa
GITHUB_PR_NUMBER: 9072 GITHUB_PR_URL: https://github.com/hasura/graphql-engine/pull/9072 PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6201 Co-authored-by: Phuong-Cat Ngo <44314126+catcecilia@users.noreply.github.com> GitOrigin-RevId: 96fa8807ded210e3d384cb7d4181088804c01fb6
99 lines
2.4 KiB
Plaintext
99 lines
2.4 KiB
Plaintext
---
|
|
sidebar_position: 6
|
|
---
|
|
|
|
# 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
|
|
|
|
```markdown
|
|
```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
|
|
|
|
```graphql {2,5}
|
|
query {
|
|
authors (where: {articles: {rating: {_gt: 4}}}) {
|
|
id
|
|
name
|
|
articles (where: {rating: {_gt: 4}}) {
|
|
id
|
|
title
|
|
rating
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
:::caution Supported Languages
|
|
|
|
- Docusaurus uses prisma under the hood for code-block syntax highlighting. Please refer to the supported languages
|
|
[here](https://prismjs.com/#supported-languages).
|
|
- By default prisma includes a few that are listed
|
|
[here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js). 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.
|
|
|
|
```html
|
|
<div className="parsed-literal">
|
|
<pre>
|
|
<code>
|
|
{`{
|
|
"table" : `}<a href="#tablename">TableName</a>{`
|
|
"column" : `}<a href="#pgcolumn">PGColumn</a>{`
|
|
}`}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
```
|
|
|
|
<details>
|
|
<summary>Why is it wrapped in a div with parsed-literal className?</summary>
|
|
|
|
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 :)
|
|
</details>
|
|
|
|
<div className="parsed-literal">
|
|
<pre>
|
|
<code>
|
|
{`{
|
|
"table" : `}<a href="#tablename">TableName</a>{`
|
|
"column" : `}<a href="#pgcolumn">PGColumn</a>{`
|
|
}`}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
:::tip
|
|
|
|
Please refer to docusaurus's [Code Blocks Docs](https://docusaurus.io/docs/markdown-features/code-blocks) for further syntax
|
|
and usage guidance.
|
|
|
|
:::
|