Skip to content

Improve rendering of admonition blocks

Paul Gascou-Vaillancourt requested to merge fix-todos-replacement into master

Note: This re-introduces the changes from !1858 (merged) without using named groups in the replacement RegExp as those aren't supported in Firefox.

Currently, the RegExp used to match notes, tips, todos and warnings in .md files omits the potentially leading HTML tag but it does include the closing tag which results in errors being logged to the console (in development only, Vue errors are suppressed in production):

[Vue warn]: Error compiling template:

tag <span> has no matching end tag.

96 |  </tbody>
97 |  </table>
98 |  <p><span class="admonition admonition--note"><span>Note: </span> This is a note</p></span><hr />
   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
99 |  <p><span class="admonition admonition--tip"><span>Tip: </span> This is a tip</p></span><hr />
100|  <p><span class="admonition admonition--todo"><span>Todo: </span> This is a todo</p></span><hr />

found in

---> <Anonymous>
       <MdDisplay>
         <BTab>
           <GlTab>
             <BTabs>
               <GlTabs>
                 <ComponentInfo> at components/componentinfo.vue
                   <Pages/Section/Slug.vue> at pages/_section/_slug.vue
                     <Nuxt>
                       <Layouts/default.vue> at layouts/default.vue
                         <Root>

This MR fixes this by updating the RegExp to match both the leading and closing tags. It also moves the replacement logic to a dedicated function to reduce code duplication.

This doesn't change anything visually:

Before After
image image

Merge request reports