@sanity/highlightjs-groq

highlight.js language definition for GROQ syntax highlighting.

Install

npm install @sanity/highlightjs-groq

Usage with react-lowlight

import Lowlight from 'react-lowlight'
import groq from '@sanity/highlightjs-groq'

// Register the language (do this once, e.g. in your app entry)
Lowlight.registerLanguage('groq', groq)

// In your component:
function CodeBlock({query}: {query: string}) {
  return <Lowlight language="groq" value={query} markers={[]} />
}

Usage with highlight.js

import hljs from 'highlight.js/lib/core'
import groq from '@sanity/highlightjs-groq'

hljs.registerLanguage('groq', groq)

const result = hljs.highlight('*[_type == "post"]{title}', {language: 'groq'})
console.log(result.value)

Usage with lowlight

import {createLowlight} from 'lowlight'
import groq from '@sanity/highlightjs-groq'

const lowlight = createLowlight()
lowlight.register('groq', groq)

const tree = lowlight.highlight('groq', '*[_type == "post"]')

License

MIT