How to render math symbols inside code block

Question

I am an HTML newbie and use it to create a reveal.js presentation.

I have a code block of pseudo-code and I wish to render math symbols as part of the code. How can I do it? (when I generate it outside of a code block, e.g., <p>$\exists i \in [K]$</p> it renders correctly).

<pre> <code>
While $\exists i \in [K] \text{  s.t  } f(i)>5$
</code></pre>

Dependencies are initialized in the following way -

dependencies: [
    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
    { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
    { src: 'plugin/notes/notes.js', async: true },
    { src: 'plugin/math/math.js', async: true },
    { src: 'plugin/chalkboard/chalkboard.js' },
    { src: 'plugin/menu/menu.js', async: true },
    { src: 'plugin/line-numbers/line-numbers.js'}
]

Thanks!