Show code-snippets inside an Angular application on the html part

Issue

I'm working on a tutorial page with Angular on which I want to show some code in: 'Java', 'TypeScript', 'C#', 'Html'. I know there is a snipped called , but that seems to be not that what I want.

For example: My uploaded image shows a code snipped in different colors which I got from material.angular.io/components. Is there a simple way to define this code as an component in the appropriated Style in which the code should look like, like the example image, also defined in different colors?

This component from the image would be great, because of the copy button at the right. Has anybody an idea if this component already exist?

enter image description here

Solution

Using <pre> and <code> it would be possible to display code blocks with the use of innerHTML.

<pre>
  <code [innerHTML]="code"></code>
</pre>
 Java Code 
<pre>
  <code [innerHTML]="java_code"></code>
</pre>

https://stackblitz.com/edit/angular-display-code-snippets-in-html-page-e61cdd?file=src%2Fapp%2Fapp.component.html

What you probably want though, is also prettified and colored code blocks. For that there are packages available for use.

E.g ngx-highlights: https://www.npmjs.com/package/ngx-highlightjs

Demo: https://ngx-highlight.netlify.app/

Answered By - Joosep Parts