Example of creating inline code label?

Developing with Prismic
#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:

#4

So, is this possible in Slice Machine? Labels is the old (web editor) standard but when adding them in slice machine as soon as you save the document it deletes the labels property.

It looks like inline code (and the flexibility of labels generally) is no longer supported?

#5

Hey @dan, yes, this is possible since V0.4.2.
Are you getting an error in the console?