(B8) - Interactive Code

I recently discovered Trinket and GitHub Gist which are simple ways to display code on websites. To embed and resize a gist, you can paste the following code in the header of your html (between the <$\mathtt{head}$> tags).




Indeed, this is a gist showing how to embed itself. While Gist can only be used to display static code, Trinket actually provides you with an interactive window to run and edit the code. For example, here is a simple Python trinket that uses the sieve of Eratosthenes to print out all the prime numbers less than or equal to $n$. Go ahead and run it!




And here is an HTML-trinket that runs a simple Paper javascript graphic (taken straight from the examples page). You can edit the file $\mathtt{parameters}$.$\mathtt{js}$ to change the number, size, stiffness, and max speed of the balls.





Although Gist and Trinket make embedding code extremely easy, neither support custom syntax-highlighting. Since I don't like the glaring white code-boxes, I instead use CodeMirror (see link for instructions). Finally, if you were wondering how to display LaTeX math equations (eg. $e^{i \pi} + 1 = 0$), you can use MathJax by pasting the following code into the header of the your html. To make equations work globally throughout your Google blog, paste it into the header of your blog's template. The following code-box is displayed using CodeMirror with my own custom theme (meant for Python).

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"> MathJax.Hub.Config({ extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"], jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], }, "HTML-CSS": { availableFonts: ["TeX"] } }); </script>