added preview-styling script

custom-stylesheet/info.json

@@ -1,5 +1,5 @@
 {
-  "name": "Custom user interface styles",
+  "name": "Custom user interface styling",
   "identifier": "custom-stylesheet",
   "script": "custom-stylesheet.qml",
   "authors": ["@pbek"],

preview-styling/info.json

@@ -0,0 +1,9 @@
+{
+  "name": "Custom note preview styling",
+  "identifier": "preview-styling",
+  "script": "preview-styling.qml",
+  "authors": ["@pbek"],
+  "version": "0.0.1",
+  "minAppVersion": "17.05.7",
+  "description" : "With this script you can add custom stylesheets to the note preview. Please refer to the <a href='http://doc.qt.io/qt-5/richtext-html-subset.html'>Supported HTML Subset</a> documentation for a list of all supported css styles. "
+}

preview-styling/preview-styling.qml

@@ -0,0 +1,36 @@
+import QtQml 2.0
+
+/**
+ * This is an example for custom styling of html in the note preview
+ */
+QtObject {
+    property string customStylesheet;
+
+    // register your settings variables so the user can set them in the script settings
+    property variant settingsVariables: [
+        {
+            "identifier": "customStylesheet",
+            "name": "Custom stylesheet",
+            "description": "Please enter your custom stylesheet:",
+            "type": "text",
+            "default": "h2 {margin-left: 20px;}\nh3 {margin-left: 40px;}\nh4 {margin-left: 60px;}",
+        },
+    ];
+
+    /**
+     * This function is called when the markdown html of a note is generated
+     * 
+     * It allows you to modify this html
+     * This is for example called before by the note preview
+     * 
+     * @param {NoteApi} note - the note object
+     * @param {string} html - the html that is about to being rendered
+     * @return {string} the modfied html or an empty string if nothing should be modified
+     */
+    function noteToMarkdownHtmlHook(note, html) {
+        // see http://doc.qt.io/qt-5/richtext-html-subset.html for a list of
+        // supported css styles
+        html = html.replace("</style>", customStylesheet + "</style>");
+        return html;
+    }
+}