jsonSyntaxHighlight() — supabase Function Reference

Architecture documentation for the jsonSyntaxHighlight() function in MessagesFormatters.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement called by 1

Entity Profile

ContentManagement→ MediaManagement→ jsonSyntaxHighlight() — supabase Function Reference

Dependency Diagram

graph TD
  f5f30398_eee0_fbad_600b_52693490bc83["jsonSyntaxHighlight()"]
  52e4ced8_0359_1fa3_4adc_58ea9cc603b7["SelectedRealtimeMessagePanel()"]
  52e4ced8_0359_1fa3_4adc_58ea9cc603b7 -->|calls| f5f30398_eee0_fbad_600b_52693490bc83
  style f5f30398_eee0_fbad_600b_52693490bc83 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Realtime/Inspector/MessagesFormatters.tsx lines 57–86

export function jsonSyntaxHighlight(input: Object) {
  let json: string = JSON.stringify(input, null, 2)
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

  const newJson = json.replace(
    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,

    function (match) {
      var cls = 'number text-tomato-900'
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = 'key text-scale-1200'
        } else {
          cls = 'string text-brand-600'
        }
      } else if (/true|false/.test(match)) {
        cls = 'boolean text-blue-900'
      } else if (/null/.test(match)) {
        cls = 'null text-amber-1100'
      }
      return '<span class="' + cls + '">' + match + '</span>'
    }
  )

  const jsonWithLineWraps = newJson.split(`\n`).map((x) => {
    return `<span class="line text-xs">${x}</span>`
  })

  return jsonWithLineWraps.join('\n')
}