Sanity.io code input – how to add an input field for highlighted lines?

Question

I've stuck trying to add highlightedLines field to Sanity.io code input. The only docs I've found yet are on npm page of the module, and there is an example data model:

{
  _type: 'code',
  language: 'js',
  highlightedLines: [1, 2], // <--- I need to have this field accessible in sanity studio
  code: 'const foo = "bar"\nconsole.log(foo.toUpperCase())\n// BAR'
}

I've tried (naively) to add fields: { foo: "array" } property to the "Code block" object in blockContent.js, but then the studio didn't compile, throwing Cannot override 'fields' of subtypes of "object" error.

Do I need to create new type from code and decorate it with additional fields separately?

// current blockContent.js

export default {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    {
    // ...  

    {
      type: "image",
      options: { hotspot: true },
    },
    {
      title: "Code block",
      name: "code",
      type: "code",
      options: {
        withFilename: true,
      }
    },
  ],
};

I'd gladly take any suggestions.

Answer 1

You can highlight a line by clicking on its line number on the left. Could be added to the documentation :)