diff --git a/qml/pages/EditPage.qml b/qml/pages/EditPage.qml
index 756da73..fcaa1be 100644
--- a/qml/pages/EditPage.qml
+++ b/qml/pages/EditPage.qml
@@ -60,7 +60,7 @@ Dialog {
                     width: parent.width
                     focus: true
                     text: note.content
-                    font.family: appSettings.useMonoFont ? "DejaVu Sans Mono" : Theme.fontFamily // "Courier"
+                    font.family: appSettings.useMonoFont ? "DejaVu Sans Mono" : Theme.fontFamily
                     property int preTextLength: 0
                     property var listPrefixes: [/^( *)- /gm, /^( *)\* /gm, /^( *)\+ /gm, /^( *)- \[ \] /gm, /^( *)- \[[xX]\] /gm, /^( *)> /gm, /^( *)\d+. /gm]
                     onTextChanged: {
diff --git a/qml/pages/SyntaxPage.qml b/qml/pages/SyntaxPage.qml
index 9291837..5096f8a 100644
--- a/qml/pages/SyntaxPage.qml
+++ b/qml/pages/SyntaxPage.qml
@@ -4,6 +4,52 @@ import Sailfish.Silica 1.0
 Page {
     id: page
 
+    Component {
+        id: syntaxDrawer
+
+        Drawer {
+            id: drawer
+            width: page.width
+            height: rawTextLabel.height > convertedTextLabel.height ? rawTextLabel.height : convertedTextLabel.height
+            backgroundSize: height
+            foreground: BackgroundItem {
+                width: parent.width
+                height: parent.height
+                onClicked: drawer.show()
+                Label {
+                    id: rawTextLabel
+                    x: Theme.horizontalPageMargin
+                    width: parent.width - 2*x
+                    wrapMode: Text.Wrap
+                    font.family: appSettings.useMonoFont ? "DejaVu Sans Mono" : Theme.fontFamily
+                    text: rawText
+                }
+            }
+            background: BackgroundItem {
+                width: parent.width
+                height: parent.height
+                onClicked: drawer.hide()
+                LinkedLabel {
+                    id: convertedTextLabel
+                    x: Theme.horizontalPageMargin
+                    width: parent.width - 2*x
+                    textFormat: Text.RichText
+                    linkColor: Theme.primaryColor
+                    defaultLinkActions: false
+                    onLinkActivated: drawer.hide()
+                    text: "<style>\n" +
+                          "ul,ol,table,img { margin: " + Theme.paddingLarge + "px 0px; }\n" +
+                          "a:link { color: " + Theme.primaryColor + "; }\n" +
+                          "a.checkbox { text-decoration: none; padding: " + Theme.paddingSmall + "px; display: inline-block; }\n" +
+                          "li.tasklist { font-size:large; margin: " + Theme.paddingMedium + "px 0px; }\n" +
+                          "del { text-decoration: line-through; }\n" +
+                          "table { border-color: " + Theme.secondaryColor + "; }\n" +
+                          "</style>\n" + convertedText
+                }
+            }
+        }
+    }
+
     SilicaFlickable {
         id: flickable
         anchors.fill: parent
@@ -20,23 +66,68 @@ Page {
             SectionHeader {
                 text: qsTr("Header")
             }
-            Drawer {
-                id: headerDrawer
-                width: parent.width
-                background: LinkedLabel {
-                    x: Theme.horizontalPageMargin
-                    width: parent.width - 2*x
-                    textFormat: Text.RichText
-                    linkColor: Theme.primaryColor
-                    text: "Formatted Text"
-                }
-                BackgroundItem {
-                    anchors.fill: parent
-                    onClicked: headerDrawer.open = !headerDrawer.open
-                    Label {
-                        text: "Raw Text"
-                    }
-                }
+            Loader {
+                sourceComponent: syntaxDrawer
+                property string rawText: "
+# Header 1
+## Header 2
+### Header 3
+#### Header 4
+##### Header 5
+###### Header 6";
+                property string convertedText: "
+<h1>Header 1</h1>
+<h2>Header 2</h2>
+<h3>Header 3</h3>
+<h4>Header 4</h4>
+<h5>Header 5</h5>
+<h6>Header 6</h6>"
+            }
+
+            SectionHeader {
+                text: qsTr("Links")
+            }
+            Loader {
+                sourceComponent: syntaxDrawer
+                property string rawText: "
+https://jolla.com
+info@jolla.com
+[Homepage - Jolla](https://jolla.com)
+[Link to Jolla][1]
+[jolla][]
+
+[1]: https://jolla.com
+[jolla]: https://jolla.com"
+                property string convertedText: "
+<a href=\"https://jolla.com\">https://jolla.com</a><br>
+<a href=\"mailto:info@jolla.com\">info@jolla.com</a><br>
+<a href=\"https://jolla.com\">Homepage - Jolla</a><br>
+<a href=\"https://jolla.com\">Homepage - Jolla</a><br>
+<a href=\"https://jolla.com\">Homepage - Jolla</a>"
+            }
+
+            SectionHeader {
+                text: qsTr("Tables")
+            }
+            Loader {
+                sourceComponent: syntaxDrawer
+                property string rawText: "
+|Header 1    |Header 2    |Header 3    |
+|:-----------|:----------:|-----------:|
+|Content 1.1 |Content 2.1 |Content 3.1 |
+|Content 1.2 |Content 2.2 |Content 3.2 |
+|Content 1.3 |Content 2.3 |Content 3.3 |"
+                property string convertedText: "
+<table>
+<thead>
+<tr><td>Header 1</td><td>Header 2</td><td>Header 3</td></tr>
+</thead>
+<tbody>
+<tr><td>Content 1.1</td><td>Content 2.1</td><td>Content 3.1</td></tr>
+<tr><td>Content 1.2</td><td>Content 2.2</td><td>Content 3.2</td></tr>
+<tr><td>Content 1.3</td><td>Content 2.3</td><td>Content 3.3</td></tr>
+</tbody>
+</table>"
             }
         }