Example of creating inline code label?

Developing with Prismic
2

Okay I figured it out, it's very easy.

  1. Within Custom Types screen in the prismic admin, Add the "labels" key (not "label" which is the actual label for the field) and value to your config block within your StructuredText field:
"example_rich_text": {
   "type": "StructuredText",
   "config": {
     "single": "paragraph",
     "label": "Rich Content",
     "placeholder": "Rich Content",
     "labels": ["inline-code"]
   }
}
  1. Save and go to a document using this Custom Type.
  2. Select the text you want to be inline-code
  3. In the toolbar there is an icon for customs labels that looks like this
    image
  4. Click it and select inline-code from the dropdown.
  5. Publish your document.
  6. Using CSS in your app, style the span that's rendered now with a class of .inline-code, perhaps something like this
   .inline-code {
      background-color: lightgray;
      display: inline-block;
      padding: 0 .5ch;
      margin: 0 .5ch;
      font-family: monospace;
    }

That's it!

1 Like