Example of creating inline code label?

Content Modeling
#1

I'm finding the docs fairly dense and convoluted. Can someone point me to or provide an example of using custom labels to achieve inline code formatting.... like this <--

Thank you!

#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
Embeds within Structured/Rich Text
#3

Thanks for sharing this information James :slight_smile: