JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Usage of directive</h2>
<p>Here I'd like to describe my directive and show the directive in a code block
    (but how do I block angular to execute the directive?!)</p>
<pre><code>
    
    </code>
</pre>

<script id="script-block" type="text/demo">
    <simple-directive>I'm in the script tag</simple-directive>
</script>
^--- the above directive must not run. 
<!--<div ng-app="myApp"> doesn't work-->
<p>The following directive code shows the result:</p>
<simple-directive></simple-directive>
<!-- </div> -->

CSS

pre {
    background: lightgray;
}
#script-block{
    
    display:block;
    background: yellow;
    padding:10px
}

JavaScript

angular.module('myApp', [])
.directive('code', function(){
    return{
        restrict:'E',
        link:function(scope, elem){
            elem.text('<simple-directive></simple-directive>')
        }
    }
})
.directive('simpleDirective', function() {
    return {
        restrict: 'EA',
        template: 'I\'m a simple directive!'
    };
});