Integrate Google Code Prettify (highlight) in Ghost
Modifications for posts
To integrate Google Code Prettify, you need to do the following:
- open
ghost/content/themes/YOUR_THEME_NAME/default.hbs
- Before
</body>
, insert the following:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
- when Writing a new Post, specify your code language with the following markdown:
```prettyprint lang-python
def main():
print(
"Finally... technical writing is as easy as %s" %
' '.join(map(lambda x: str(x), range(1,4))))
``` - Here is what is looks like:
def main():
print(
"Finally... technical writing is as easy as %s" %
' '.join(map(lambda x: str(x), range(1,4))))
Modifications for MarkDown (Live View on edit)
- Edit your
ghost/core/server/views/default.hbs
and add the following before</body>
:
{{! Load and configure mathjax }}<br>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
script>
{{! Re-render MathJax in live preview}}
<script>
var timeout, entry = document.getElementsByClassName('entry-markdown')[0];
function mathjaxify()
{
var preview = document.getElementsByClassName('rendered-markdown')[0];
if (typeof(typeset) == "undefined" || typeset == true) {
MathJax.Hub.Queue(["Typeset", MathJax.Hub, preview]); // renders mathjax if 'typeset' is true (or undefined)
typesetStubbornMath();
}
// Render the bits of math that have inexplicably still failed to render, while
// leaving the rest alone. (If you try to typeset the whole page, it will break
// other things)
function typesetStubbornMath() {
$(".MathJax_Preview").each( function() {
if($(this).text() != "") {
MathJax.Hub.Queue(["Typeset", MathJax.Hub, $(this).attr("id")]);
}
});
}
}
// Listen for Key Presses if on Editor
if(entry) {
jQuery(document).keypress(function(event) {
clearTimeout(timeout);
timeout = setTimeout(mathjaxify, 2001);
});
}
// Check for Change of Post Selection
setTimeout(function(){
jQuery('.content-list-content li').click(function(){ mathjaxify(); });
}, 500);
</script>