Adding disqus comments to sinatra app using slim template language - sinatra

Question

I have an app built with Sinatra. One of the pages is called "discussion" and I chose to power the comments with disqus. I copied the universal instructions
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'voltairequotes';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
but i converted the code to slim and added them to the page
discussion.slim
h2 Discussion Area
p Add your comments below and please cite what quote you are referring to.
#disqus_thread
javascript:
/!* * * CONFIGURATION VARIABLES * * */
| var disqus_shortname = 'voltairequotes';
/!* * * DON'T EDIT BELOW THIS LINE * * */
| (function() {
| var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
| dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
| (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
| })();
noscript
| Please enable JavaScript to view the
a href="https://disqus.com/?ref_noscript" rel="nofollow" comments powered by Disqus.
But the comments will not show up. But the code shows up when I go to inspect element.
Not sure what I am missing or perhaps i have a typo or mistake in my markup

Answer 1

OK i solved the problem overall. Hence I am posting the solution to help others.
But leaving the question since I still fail to see how my first attempt was unsuccessful.
What I did was move the javascript to its own file, which is a good practice anyways.