diff --git a/README.md b/README.md
index 605c40f..0b47212 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ downloaded from the following locations:
 * [Popper.js](https://github.com/FezVrasta/popper.js#installation)
 * [Highlight.js](https://highlightjs.org/download/)
 * [Showdown](https://github.com/showdownjs/showdown/releases)
+* [ace](https://github.com/ajaxorg/ace-builds/releases)
 
 ## Building and running with Docker
 
diff --git a/src/app/static/ws_listener.js b/src/app/static/ws_listener.js
index 0cf9887..dbff144 100644
--- a/src/app/static/ws_listener.js
+++ b/src/app/static/ws_listener.js
@@ -1,6 +1,11 @@
 let ws = new WebSocket('ws://' + document.location.host + '/ws');
 
 let converter = new showdown.Converter();
+// TODO: don't hardcode anchor id
+let editor = ace.edit('anchor_webide');
+editor.setTheme('ace/theme/monokai');
+editor.getSession().setMode('ace/mode/python');
+editor.$blockScrolling = Infinity;
 
 $('#container').on('click', '.anchor', ( function (event) {
     let anchorName = $(this).attr('id').replace('_event', '');
@@ -42,8 +47,7 @@ ws.onmessage = function (messageEvent) {
     console.log(message);
     let $anchor = $('#' + message['anchor']);
     if (message['anchor'] === 'anchor_webide') {
-        let code = hljs.highlightAuto(message['data']);
-        $anchor.html(code.value);
+        editor.setValue(message['data'], -1);
     }
     else {
         let formatted_message = converter.makeHtml(message['data']);
diff --git a/src/app/templates/index.html b/src/app/templates/index.html
index 7445d3b..a898b48 100644
--- a/src/app/templates/index.html
+++ b/src/app/templates/index.html
@@ -42,6 +42,7 @@
     <script src="{{ static_url('vendor/js/bootstrap.min.js') }}" defer></script>
     <script src="{{ static_url('vendor/js/highlight.min.js') }} defer"></script>
     <script src="{{ static_url('vendor/js/showdown.min.js') }} defer"></script>
+    <script src="{{ static_url('vendor/js/ace/ace.js') }} defer"></script>
     <script src="{{ static_url('ws_listener.js') }}" defer></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/app/templates/module-webide.html b/src/app/templates/module-webide.html
index bb716d4..46b410d 100644
--- a/src/app/templates/module-webide.html
+++ b/src/app/templates/module-webide.html
@@ -1,9 +1,6 @@
 <h1>Source code</h1>
-<pre>
-    <code id="{{ anchor_id }}">
-        &nbsp;
-    </code>
-</pre>
+<div  id="{{ anchor_id }}" class="mt-3 mb-3">
+</div>
 <button type="button" class="btn btn-outline-primary anchor" id="{{ anchor_id }}_event">
     Next
 </button>