I'm attempting to showcase cards on my webpage, but the text I'm displaying contains some code snippets like the one illustrated below:
<div class="app">
<h1> All Fishes and Their Photos</h1>
<ul v-for="(fish, i) in fishes" :key="i" />
<li>
<div class="maincontainer">
<div class="back">
<p>{{fish['Biology']}}</p>
</div>
<div class="front">
<div class="image">
<img :src="fish['Species Illustration Photo'].src" />
<h2>{{ fish['Species Name']}}</h2>
</div>
</div>
</div>
</li>
</ul>
</div>