SyntaxHighlighter is a popular code highlight tool using in wordpress.It also can be pluged into TinyMCE.
First..Download SyntaxHighlighter from its site and extract it into your app static folder.
add script and css in html
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js">
</script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shBrushPython.js">
</script> '''Here use python code style'''
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCore.css"/>Then download another plugin for TinyMCE named SyntaxHL. Extract it and add it into TinyMCE plugin: /static/tinymce/jscripts/tiny_mce/plugins/
Add following in TinyMCE setting:
tinyMCE.init({
plugins:syntaxhl
remove_linebreaks:false,
extended_valid_elements:"pre[cols|rows|disabled|name|readonly|class]",
});We can find code editor button appear in TinyMCE toolbar,and code is highlight at website.