Style macro options with <code> for table captions

lib/get-macro-options/index.js

@@ -219,15 +219,20 @@ function getMacroOptions(componentName) {
   ]
     .concat(
       nestedOptions.map(([option]) => {
+        const names = option.name.split(' ')
+
+        // Wrap option name with `<code>` (excluding parents)
+        names[names.length - 1] = `<code>${names.at(-1)}</code>`
+
         return {
           ...option,
 
           // Append "objects" to the table caption for arrays of nested objects
           // to clarify that the options are for arrays of objects, not arrays
           name:
             option.type === 'array' && option.params
-              ? `Options for ${option.name} ${option.type} objects`
-              : `Options for ${option.name} ${option.type}`,
+              ? `Options for ${names.join(' ')} ${option.type} objects`
+              : `Options for ${names.join(' ')} ${option.type}`,
 
           options: option.params
         }
@@ -237,7 +242,7 @@ function getMacroOptions(componentName) {
       additionalComponents.map(([option, parent]) => ({
         ...option,
 
-        name: `Options for ${option.name} component`,
+        name: `Options for <code>${option.name}</code> component`,
         options: getMacroOptionsJson(option.slug)
           .map((option) => addSlugs(option, parent))
           .map(renderNameWithBreaks)

src/stylesheets/main.scss

@@ -248,6 +248,7 @@ $colour-list-breakpoint: 980px;
 
 // Add styling for inline code
 li code,
+caption code,
 td code,
 p code {
   padding: 1px 3px;
@@ -259,6 +260,14 @@ p code {
   }
 }
 
+// Add styling for code in headings
+.govuk-heading-s code,
+.govuk-heading-m code,
+.govuk-heading-l code,
+.govuk-heading-xl code {
+  font-size: inherit;
+}
+
 // Add styling for block code
 pre code {
   display: block;