Include html code in modal from bootstrap - html

Question

For school, I have to make my own website that shows some basic things to first years. So I got the idea, that I make a modal with Bootstrap. If you press the card, the modal will pop up.
Now, I want in the middle where 'CODE WHERE' is, to show the code for something. For example: let me just print or . But it won't let me, it will convert into HTML all the time and I don't want to convert it. I've looked a lot of pages, but I don't seem to find how. Anyone a solution?
Thank you very much.
<!-- Button trigger modal -->
<div style="cursor: pointer;" class="col-md-12" data-toggle="modal" data-target="#exampleModal">
<div class="card mb-4 shadow-sm">
<div class="card-body">
Text
</div>
</div>
</a>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Code</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<pre>
<code>
CODE HERE??
</code>
</pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close Modal</button>
</div>
</div>
</div>

Answer 1

First way is replacing < by < and > by > inside Your <code></code>.
Second way is make it change automatically in javascript:
var codeTags = document.querySelectorAll('code');
for (var i = 0; i < codeTags.length; i++) {
codeTags[i].innerText = codeTags[i].innerHTML;
}
Or easier in jQuery:
$('code').each(function(){
$(this).text($(this).html());
});