'Add Code and pre tags to include code sample to angular component template

I was using <code> & <pre> tags in html pages to include code samples in my website...

Like:

<pre class="code">
// Host creation
public class Program
{
  public static void Main(string[] args)
  {
   CreateWebHostBuilder(args).Build().Run();
  }

  services.AddTransient<IDataAccessLayer>(a => new DataAccessLayer(_config));
  services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();  
}
</pre>

The same pre tag when I use inside my angular component file its showing error for opening brace { and 'IDataAccessLayer' is not a known element.

I replaced all my "{", "}" with &#40; and &#41;

Now the C# sample code inside <pre> is still showing error. Is there any way of displaying the sample code block in the component as I have multiple code block returning the html through function is not feasible.

package version installed
angular cli 13.2.6
TS 4.5.5


Solution 1:[1]

Have you seen this lib ngx-highlight ?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Souhail Chougrani