Rendering <code> tag within template gives tag <object> has no matching end tag error-CodePudding

I'm trying to render a code snippet in my index.vue file using the following vue component.

<CodeSnippet>
  <code>
   <pre>
     public TokenAuthenticationAttribute() : base(typeof(AuthorizeAction))
     {
       Arguments = Array.Empty<object>();
     }
   </pre>
 </code>
</CodeSnippet>

When saving the file I get the following compiler error in VS code.

Errors compiling template:
    
tag <object> has no matching end tag.

I understand that it thinks <object> is a html tag and is expecting a closing tag </object> but that's not possible as this is a c# code snippet.

Is there any way to emit compiling of the text within a block or any way around this? I've tried using v-pre on the code tag but it hasn't helped.

Thanks

CodePudding user response：

<CodeSnippet>
  <code>
   <pre>{{ `
     public TokenAuthenticationAttribute() : base(typeof(AuthorizeAction))
     {
       Arguments = Array.Empty<object>();
     }
   ` }}</pre>
 </code>
</CodeSnippet>

CodePudding user response：

I've got around this by using the HTML name code for the < > symbols instead.

& lt; and & gt;