首页 发现 帮助
注册 登录
Apq
/
vnote
镜像自地址 https://github.com/vnotex/vnote.git
1
0
派生 0
文件 工单管理 0 Wiki
浏览代码

support code block MathJax preview

Le Tan 7 年之前
父节点
c72398e887
当前提交
8239abec2a
共有 20 个文件被更改，包括 1180 次插入 和 21 次删除
合并视图 显示文件统计
  1. 6 1
      src/resources/markdown_template.js
  2. 48 0
      src/resources/mathjax_preview.js
  3. 15 0
      src/resources/mathjax_preview_template.html
  4. 6 2
      src/src.pro
  5. 3 0
      src/utils/dom-to-image/README.md
  6. 779 0
      src/utils/dom-to-image/dom-to-image.js
  7. 25 0
      src/utils/vutils.cpp
  8. 3 0
      src/utils/vutils.h
  9. 3 0
      src/vconstants.h
  10. 6 1
      src/veditarea.cpp
  11. 9 0
      src/veditarea.h
  12. 46 7
      src/vlivepreviewhelper.cpp
  13. 33 0
      src/vlivepreviewhelper.h
  14. 64 0
      src/vmathjaxpreviewhelper.cpp
  15. 62 0
      src/vmathjaxpreviewhelper.h
  16. 23 0
      src/vmathjaxwebdocument.cpp
  17. 31 0
      src/vmathjaxwebdocument.h
  18. 13 10
      src/vnote.cpp
  19. 2 0
      src/vnote.h
  20. 3 0
      src/vnote.qrc

+ 6 - 1
src/resources/markdown_template.js
查看文件 

@@ -1419,6 +1419,11 @@ var previewCodeBlock = function(id, lang, text, isLivePreview) {
 
 
 
 var setPreviewContent = function(lang, html) {
 
 var setPreviewContent = function(lang, html) {
 
     previewDiv.innerHTML = html;
 
     previewDiv.innerHTML = html;
 
+
 
     // Treat plantUML and graphviz the same.
 
     // Treat plantUML and graphviz the same.
 
-    previewDiv.classList = VPlantUMLDivClass;
 
+    if (lang == "puml" || lang == "dot") {
 
+        previewDiv.classList = VPlantUMLDivClass;
 
+    } else {
 
+        previewDiv.className = '';
 
+    }
 
 };
 
 };

+ 48 - 0
src/resources/mathjax_preview.js
查看文件 

@@ -0,0 +1,48 @@
 
+var channelInitialized = false;
 
+
 
+var contentDiv = document.getElementById('content-div');
 
+
 
+var content;
 
+
 
+new QWebChannel(qt.webChannelTransport,
 
+    function(channel) {
 
+        content = channel.objects.content;
 
+
 
+        content.requestPreviewMathJax.connect(previewMathJax);
 
+
 
+        channelInitialized = true;
 
+    });
 
+
 
+var previewMathJax = function(identifier, id, text) {
 
+    if (text.length == 0) {
 
+        return;
 
+    }
 
+
 
+    var p = document.createElement('p');
 
+    p.id = identifier + '_' + id;
 
+    p.textContent = text;
 
+    contentDiv.appendChild(p);
 
+
 
+    try {
 
+        MathJax.Hub.Queue(["Typeset",
 
+                           MathJax.Hub,
 
+                           p,
 
+                           postProcessMathJax.bind(undefined, identifier, id, p)]);
 
+    } catch (err) {
 
+        console.log("err: " + err);
 
+        contentDiv.removeChild(p);
 
+        delete p;
 
+    }
 
+};
 
+
 
+var postProcessMathJax = function(identifier, id, container) {
 
+    domtoimage.toPng(container, { height: container.clientHeight * 1.5 }).then(function (dataUrl) {
 
+        var png = dataUrl.substring(dataUrl.indexOf(',') + 1);
 
+        content.mathjaxResultReady(identifier, id, 'png', png);
 
+
 
+        contentDiv.removeChild(container);
 
+        delete container;
 
+    }).catch(function (err) {
 
+        console.log("err: " + err);
 
+    });
 
+};

+ 15 - 0
src/resources/mathjax_preview_template.html
查看文件 

@@ -0,0 +1,15 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<meta charset="utf-8">
 
+<head>
 
+    <link rel="stylesheet" type="text/css" href="CSS_PLACE_HOLDER">
 
+    <script src="qrc:/resources/qwebchannel.js"></script>
 
+    <!-- EXTRA_PLACE_HOLDER -->
 
+    <script src="JS_PLACE_HOLDER" async></script>
 
+    <script src="qrc:/utils/dom-to-image/dom-to-image.js" defer></script>
 
+    <script src="qrc:/resources/mathjax_preview.js" defer></script>
 
+</head>
 
+<body>
 
+    <div id="content-div"></div>
 
+</body>
 
+</html>

+ 6 - 2
src/src.pro
查看文件 

@@ -128,7 +128,9 @@ SOURCES += main.cpp\
 
     dialog/vfixnotebookdialog.cpp \
 
     dialog/vfixnotebookdialog.cpp \
 
     vplantumlhelper.cpp \
 
     vplantumlhelper.cpp \
 
     vgraphvizhelper.cpp \
 
     vgraphvizhelper.cpp \
 
-    vlivepreviewhelper.cpp
 
+    vlivepreviewhelper.cpp \
 
+    vmathjaxpreviewhelper.cpp \
 
+    vmathjaxwebdocument.cpp
 
 
 
 HEADERS  += vmainwindow.h \
 
 HEADERS  += vmainwindow.h \
 
     vdirectorytree.h \
 
     vdirectorytree.h \
 
@@ -247,7 +249,9 @@ HEADERS  += vmainwindow.h \
 
     dialog/vfixnotebookdialog.h \
 
     dialog/vfixnotebookdialog.h \
 
     vplantumlhelper.h \
 
     vplantumlhelper.h \
 
     vgraphvizhelper.h \
 
     vgraphvizhelper.h \
 
-    vlivepreviewhelper.h
 
+    vlivepreviewhelper.h \
 
+    vmathjaxpreviewhelper.h \
 
+    vmathjaxwebdocument.h
 
 
 
 RESOURCES += \
 
 RESOURCES += \
 
     vnote.qrc \
 
     vnote.qrc \

+ 3 - 0
src/utils/dom-to-image/README.md
查看文件 

@@ -0,0 +1,3 @@
 
+# [dom-to-image](https://github.com/tsayen/dom-to-image)
 
+v2.6.0
 
+Anatolii Saienko, Paul Bakaus (original idea)

+ 779 - 0
src/utils/dom-to-image/dom-to-image.js
查看文件 

@@ -0,0 +1,779 @@
 
+(function (global) {
 
+    'use strict';
 
+
 
+    var util = newUtil();
 
+    var inliner = newInliner();
 
+    var fontFaces = newFontFaces();
 
+    var images = newImages();
 
+
 
+    // Default impl options
 
+    var defaultOptions = {
 
+        // Default is to fail on error, no placeholder
 
+        imagePlaceholder: undefined,
 
+        // Default cache bust is false, it will use the cache
 
+        cacheBust: false
 
+    };
 
+
 
+    var domtoimage = {
 
+        toSvg: toSvg,
 
+        toPng: toPng,
 
+        toJpeg: toJpeg,
 
+        toBlob: toBlob,
 
+        toPixelData: toPixelData,
 
+        impl: {
 
+            fontFaces: fontFaces,
 
+            images: images,
 
+            util: util,
 
+            inliner: inliner,
 
+            options: {}
 
+        }
 
+    };
 
+
 
+    if (typeof module !== 'undefined')
 
+        module.exports = domtoimage;
 
+    else
 
+        global.domtoimage = domtoimage;
 
+
 
+
 
+    /**
 
+     * @param {Node} node - The DOM Node object to render
 
+     * @param {Object} options - Rendering options
 
+     * @param {Function} options.filter - Should return true if passed node should be included in the output
 
+     *          (excluding node means excluding it's children as well). Not called on the root node.
 
+     * @param {String} options.bgcolor - color for the background, any valid CSS color value.
 
+     * @param {Number} options.width - width to be applied to node before rendering.
 
+     * @param {Number} options.height - height to be applied to node before rendering.
 
+     * @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
 
+     * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
 
+                defaults to 1.0.
 
+     * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
 
+     * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
 
+     * @return {Promise} - A promise that is fulfilled with a SVG image data URL
 
+     * */
 
+    function toSvg(node, options) {
 
+        options = options || {};
 
+        copyOptions(options);
 
+        return Promise.resolve(node)
 
+            .then(function (node) {
 
+                return cloneNode(node, options.filter, true);
 
+            })
 
+            .then(embedFonts)
 
+            .then(inlineImages)
 
+            .then(applyOptions)
 
+            .then(function (clone) {
 
+                return makeSvgDataUri(clone,
 
+                    options.width || util.width(node),
 
+                    options.height || util.height(node)
 
+                );
 
+            });
 
+
 
+        function applyOptions(clone) {
 
+            if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
 
+
 
+            if (options.width) clone.style.width = options.width + 'px';
 
+            if (options.height) clone.style.height = options.height + 'px';
 
+
 
+            if (options.style)
 
+                Object.keys(options.style).forEach(function (property) {
 
+                    clone.style[property] = options.style[property];
 
+                });
 
+
 
+            return clone;
 
+        }
 
+    }
 
+
 
+    /**
 
+     * @param {Node} node - The DOM Node object to render
 
+     * @param {Object} options - Rendering options, @see {@link toSvg}
 
+     * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
 
+     * */
 
+    function toPixelData(node, options) {
 
+        return draw(node, options || {})
 
+            .then(function (canvas) {
 
+                return canvas.getContext('2d').getImageData(
 
+                    0,
 
+                    0,
 
+                    util.width(node),
 
+                    util.height(node)
 
+                ).data;
 
+            });
 
+    }
 
+
 
+    /**
 
+     * @param {Node} node - The DOM Node object to render
 
+     * @param {Object} options - Rendering options, @see {@link toSvg}
 
+     * @return {Promise} - A promise that is fulfilled with a PNG image data URL
 
+     * */
 
+    function toPng(node, options) {
 
+        return draw(node, options || {})
 
+            .then(function (canvas) {
 
+                return canvas.toDataURL();
 
+            });
 
+    }
 
+
 
+    /**
 
+     * @param {Node} node - The DOM Node object to render
 
+     * @param {Object} options - Rendering options, @see {@link toSvg}
 
+     * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
 
+     * */
 
+    function toJpeg(node, options) {
 
+        options = options || {};
 
+        return draw(node, options)
 
+            .then(function (canvas) {
 
+                return canvas.toDataURL('image/jpeg', options.quality || 1.0);
 
+            });
 
+    }
 
+
 
+    /**
 
+     * @param {Node} node - The DOM Node object to render
 
+     * @param {Object} options - Rendering options, @see {@link toSvg}
 
+     * @return {Promise} - A promise that is fulfilled with a PNG image blob
 
+     * */
 
+    function toBlob(node, options) {
 
+        return draw(node, options || {})
 
+            .then(util.canvasToBlob);
 
+    }
 
+
 
+    function copyOptions(options) {
 
+        // Copy options to impl options for use in impl
 
+        if(typeof(options.imagePlaceholder) === 'undefined') {
 
+            domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
 
+        } else {
 
+            domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
 
+        }
 
+
 
+        if(typeof(options.cacheBust) === 'undefined') {
 
+            domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
 
+        } else {
 
+            domtoimage.impl.options.cacheBust = options.cacheBust;
 
+        }
 
+    }
 
+
 
+    function draw(domNode, options) {
 
+        return toSvg(domNode, options)
 
+            .then(util.makeImage)
 
+            .then(util.delay(100))
 
+            .then(function (image) {
 
+                var canvas = newCanvas(domNode);
 
+                canvas.getContext('2d').drawImage(image, 0, 0);
 
+                return canvas;
 
+            });
 
+
 
+        function newCanvas(domNode) {
 
+            var canvas = document.createElement('canvas');
 
+            canvas.width = options.width || util.width(domNode);
 
+            canvas.height = options.height || util.height(domNode);
 
+
 
+            if (options.bgcolor) {
 
+                var ctx = canvas.getContext('2d');
 
+                ctx.fillStyle = options.bgcolor;
 
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
 
+            }
 
+
 
+            return canvas;
 
+        }
 
+    }
 
+
 
+    function cloneNode(node, filter, root) {
 
+        if (!root && filter && !filter(node)) return Promise.resolve();
 
+
 
+        return Promise.resolve(node)
 
+            .then(makeNodeCopy)
 
+            .then(function (clone) {
 
+                return cloneChildren(node, clone, filter);
 
+            })
 
+            .then(function (clone) {
 
+                return processClone(node, clone);
 
+            });
 
+
 
+        function makeNodeCopy(node) {
 
+            if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());
 
+            return node.cloneNode(false);
 
+        }
 
+
 
+        function cloneChildren(original, clone, filter) {
 
+            var children = original.childNodes;
 
+            if (children.length === 0) return Promise.resolve(clone);
 
+
 
+            return cloneChildrenInOrder(clone, util.asArray(children), filter)
 
+                .then(function () {
 
+                    return clone;
 
+                });
 
+
 
+            function cloneChildrenInOrder(parent, children, filter) {
 
+                var done = Promise.resolve();
 
+                children.forEach(function (child) {
 
+                    done = done
 
+                        .then(function () {
 
+                            return cloneNode(child, filter);
 
+                        })
 
+                        .then(function (childClone) {
 
+                            if (childClone) parent.appendChild(childClone);
 
+                        });
 
+                });
 
+                return done;
 
+            }
 
+        }
 
+
 
+        function processClone(original, clone) {
 
+            if (!(clone instanceof Element)) return clone;
 
+
 
+            return Promise.resolve()
 
+                .then(cloneStyle)
 
+                .then(clonePseudoElements)
 
+                .then(copyUserInput)
 
+                .then(fixSvg)
 
+                .then(function () {
 
+                    return clone;
 
+                });
 
+
 
+            function cloneStyle() {
 
+                // Fix MathJax issue.
 
+                if (!clone.style) {
 
+                    return;
 
+                }
 
+
 
+                copyStyle(window.getComputedStyle(original), clone.style);
 
+
 
+                function copyStyle(source, target) {
 
+                    if (source.cssText) target.cssText = source.cssText;
 
+                    else copyProperties(source, target);
 
+
 
+                    function copyProperties(source, target) {
 
+                        util.asArray(source).forEach(function (name) {
 
+                            target.setProperty(
 
+                                name,
 
+                                source.getPropertyValue(name),
 
+                                source.getPropertyPriority(name)
 
+                            );
 
+                        });
 
+                    }
 
+                }
 
+            }
 
+
 
+            function clonePseudoElements() {
 
+                [':before', ':after'].forEach(function (element) {
 
+                    clonePseudoElement(element);
 
+                });
 
+
 
+                function clonePseudoElement(element) {
 
+                    var style = window.getComputedStyle(original, element);
 
+                    var content = style.getPropertyValue('content');
 
+
 
+                    if (content === '' || content === 'none') return;
 
+
 
+                    var className = util.uid();
 
+                    clone.className = clone.className + ' ' + className;
 
+                    var styleElement = document.createElement('style');
 
+                    styleElement.appendChild(formatPseudoElementStyle(className, element, style));
 
+                    clone.appendChild(styleElement);
 
+
 
+                    function formatPseudoElementStyle(className, element, style) {
 
+                        var selector = '.' + className + ':' + element;
 
+                        var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
 
+                        return document.createTextNode(selector + '{' + cssText + '}');
 
+
 
+                        function formatCssText(style) {
 
+                            var content = style.getPropertyValue('content');
 
+                            return style.cssText + ' content: ' + content + ';';
 
+                        }
 
+
 
+                        function formatCssProperties(style) {
 
+
 
+                            return util.asArray(style)
 
+                                .map(formatProperty)
 
+                                .join('; ') + ';';
 
+
 
+                            function formatProperty(name) {
 
+                                return name + ': ' +
 
+                                    style.getPropertyValue(name) +
 
+                                    (style.getPropertyPriority(name) ? ' !important' : '');
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+
 
+            function copyUserInput() {
 
+                if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;
 
+                if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);
 
+            }
 
+
 
+            function fixSvg() {
 
+                if (!(clone instanceof SVGElement)) return;
 
+                clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
 
+
 
+                if (!(clone instanceof SVGRectElement)) return;
 
+                ['width', 'height'].forEach(function (attribute) {
 
+                    var value = clone.getAttribute(attribute);
 
+                    if (!value) return;
 
+
 
+                    clone.style.setProperty(attribute, value);
 
+                });
 
+            }
 
+        }
 
+    }
 
+
 
+    function embedFonts(node) {
 
+        return fontFaces.resolveAll()
 
+            .then(function (cssText) {
 
+                var styleNode = document.createElement('style');
 
+                node.appendChild(styleNode);
 
+                styleNode.appendChild(document.createTextNode(cssText));
 
+                return node;
 
+            });
 
+    }
 
+
 
+    function inlineImages(node) {
 
+        return images.inlineAll(node)
 
+            .then(function () {
 
+                return node;
 
+            });
 
+    }
 
+
 
+    function makeSvgDataUri(node, width, height) {
 
+        return Promise.resolve(node)
 
+            .then(function (node) {
 
+                node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
 
+                return new XMLSerializer().serializeToString(node);
 
+            })
 
+            .then(util.escapeXhtml)
 
+            .then(function (xhtml) {
 
+                return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
 
+            })
 
+            .then(function (foreignObject) {
 
+                return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
 
+                    foreignObject + '</svg>';
 
+            })
 
+            .then(function (svg) {
 
+                return 'data:image/svg+xml;charset=utf-8,' + svg;
 
+            });
 
+    }
 
+
 
+    function newUtil() {
 
+        return {
 
+            escape: escape,
 
+            parseExtension: parseExtension,
 
+            mimeType: mimeType,
 
+            dataAsUrl: dataAsUrl,
 
+            isDataUrl: isDataUrl,
 
+            canvasToBlob: canvasToBlob,
 
+            resolveUrl: resolveUrl,
 
+            getAndEncode: getAndEncode,
 
+            uid: uid(),
 
+            delay: delay,
 
+            asArray: asArray,
 
+            escapeXhtml: escapeXhtml,
 
+            makeImage: makeImage,
 
+            width: width,
 
+            height: height
 
+        };
 
+
 
+        function mimes() {
 
+            /*
 
+             * Only WOFF and EOT mime types for fonts are 'real'
 
+             * see http://www.iana.org/assignments/media-types/media-types.xhtml
 
+             */
 
+            var WOFF = 'application/font-woff';
 
+            var JPEG = 'image/jpeg';
 
+
 
+            return {
 
+                'woff': WOFF,
 
+                'woff2': WOFF,
 
+                'ttf': 'application/font-truetype',
 
+                'eot': 'application/vnd.ms-fontobject',
 
+                'png': 'image/png',
 
+                'jpg': JPEG,
 
+                'jpeg': JPEG,
 
+                'gif': 'image/gif',
 
+                'tiff': 'image/tiff',
 
+                'svg': 'image/svg+xml'
 
+            };
 
+        }
 
+
 
+        function parseExtension(url) {
 
+            var match = /\.([^\.\/]*?)$/g.exec(url);
 
+            if (match) return match[1];
 
+            else return '';
 
+        }
 
+
 
+        function mimeType(url) {
 
+            var extension = parseExtension(url).toLowerCase();
 
+            return mimes()[extension] || '';
 
+        }
 
+
 
+        function isDataUrl(url) {
 
+            return url.search(/^(data:)/) !== -1;
 
+        }
 
+
 
+        function toBlob(canvas) {
 
+            return new Promise(function (resolve) {
 
+                var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
 
+                var length = binaryString.length;
 
+                var binaryArray = new Uint8Array(length);
 
+
 
+                for (var i = 0; i < length; i++)
 
+                    binaryArray[i] = binaryString.charCodeAt(i);
 
+
 
+                resolve(new Blob([binaryArray], {
 
+                    type: 'image/png'
 
+                }));
 
+            });
 
+        }
 
+
 
+        function canvasToBlob(canvas) {
 
+            if (canvas.toBlob)
 
+                return new Promise(function (resolve) {
 
+                    canvas.toBlob(resolve);
 
+                });
 
+
 
+            return toBlob(canvas);
 
+        }
 
+
 
+        function resolveUrl(url, baseUrl) {
 
+            var doc = document.implementation.createHTMLDocument();
 
+            var base = doc.createElement('base');
 
+            doc.head.appendChild(base);
 
+            var a = doc.createElement('a');
 
+            doc.body.appendChild(a);
 
+            base.href = baseUrl;
 
+            a.href = url;
 
+            return a.href;
 
+        }
 
+
 
+        function uid() {
 
+            var index = 0;
 
+
 
+            return function () {
 
+                return 'u' + fourRandomChars() + index++;
 
+
 
+                function fourRandomChars() {
 
+                    /* see http://stackoverflow.com/a/6248722/2519373 */
 
+                    return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
 
+                }
 
+            };
 
+        }
 
+
 
+        function makeImage(uri) {
 
+            return new Promise(function (resolve, reject) {
 
+                var image = new Image();
 
+                image.onload = function () {
 
+                    resolve(image);
 
+                };
 
+                image.onerror = reject;
 
+                image.src = uri;
 
+            });
 
+        }
 
+
 
+        function getAndEncode(url) {
 
+            var TIMEOUT = 30000;
 
+            if(domtoimage.impl.options.cacheBust) {
 
+                // Cache bypass so we dont have CORS issues with cached images
 
+                // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
 
+                url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
 
+            }
 
+
 
+            return new Promise(function (resolve) {
 
+                var request = new XMLHttpRequest();
 
+
 
+                request.onreadystatechange = done;
 
+                request.ontimeout = timeout;
 
+                request.responseType = 'blob';
 
+                request.timeout = TIMEOUT;
 
+                request.open('GET', url, true);
 
+                request.send();
 
+
 
+                var placeholder;
 
+                if(domtoimage.impl.options.imagePlaceholder) {
 
+                    var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
 
+                    if(split && split[1]) {
 
+                        placeholder = split[1];
 
+                    }
 
+                }
 
+
 
+                function done() {
 
+                    if (request.readyState !== 4) return;
 
+
 
+                    if (request.status !== 200) {
 
+                        if(placeholder) {
 
+                            resolve(placeholder);
 
+                        } else {
 
+                            fail('cannot fetch resource: ' + url + ', status: ' + request.status);
 
+                        }
 
+
 
+                        return;
 
+                    }
 
+
 
+                    var encoder = new FileReader();
 
+                    encoder.onloadend = function () {
 
+                        var content = encoder.result.split(/,/)[1];
 
+                        resolve(content);
 
+                    };
 
+                    encoder.readAsDataURL(request.response);
 
+                }
 
+
 
+                function timeout() {
 
+                    if(placeholder) {
 
+                        resolve(placeholder);
 
+                    } else {
 
+                        fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url);
 
+                    }
 
+                }
 
+
 
+                function fail(message) {
 
+                    console.error(message);
 
+                    resolve('');
 
+                }
 
+            });
 
+        }
 
+
 
+        function dataAsUrl(content, type) {
 
+            return 'data:' + type + ';base64,' + content;
 
+        }
 
+
 
+        function escape(string) {
 
+            return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
 
+        }
 
+
 
+        function delay(ms) {
 
+            return function (arg) {
 
+                return new Promise(function (resolve) {
 
+                    setTimeout(function () {
 
+                        resolve(arg);
 
+                    }, ms);
 
+                });
 
+            };
 
+        }
 
+
 
+        function asArray(arrayLike) {
 
+            var array = [];
 
+            var length = arrayLike.length;
 
+            for (var i = 0; i < length; i++) array.push(arrayLike[i]);
 
+            return array;
 
+        }
 
+
 
+        function escapeXhtml(string) {
 
+            return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
 
+        }
 
+
 
+        function width(node) {
 
+            var leftBorder = px(node, 'border-left-width');
 
+            var rightBorder = px(node, 'border-right-width');
 
+            return node.scrollWidth + leftBorder + rightBorder;
 
+        }
 
+
 
+        function height(node) {
 
+            var topBorder = px(node, 'border-top-width');
 
+            var bottomBorder = px(node, 'border-bottom-width');
 
+            return node.scrollHeight + topBorder + bottomBorder;
 
+        }
 
+
 
+        function px(node, styleProperty) {
 
+            var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
 
+            return parseFloat(value.replace('px', ''));
 
+        }
 
+    }
 
+
 
+    function newInliner() {
 
+        var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
 
+
 
+        return {
 
+            inlineAll: inlineAll,
 
+            shouldProcess: shouldProcess,
 
+            impl: {
 
+                readUrls: readUrls,
 
+                inline: inline
 
+            }
 
+        };
 
+
 
+        function shouldProcess(string) {
 
+            return string.search(URL_REGEX) !== -1;
 
+        }
 
+
 
+        function readUrls(string) {
 
+            var result = [];
 
+            var match;
 
+            while ((match = URL_REGEX.exec(string)) !== null) {
 
+                result.push(match[1]);
 
+            }
 
+            return result.filter(function (url) {
 
+                return !util.isDataUrl(url);
 
+            });
 
+        }
 
+
 
+        function inline(string, url, baseUrl, get) {
 
+            return Promise.resolve(url)
 
+                .then(function (url) {
 
+                    return baseUrl ? util.resolveUrl(url, baseUrl) : url;
 
+                })
 
+                .then(get || util.getAndEncode)
 
+                .then(function (data) {
 
+                    return util.dataAsUrl(data, util.mimeType(url));
 
+                })
 
+                .then(function (dataUrl) {
 
+                    return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
 
+                });
 
+
 
+            function urlAsRegex(url) {
 
+                return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');
 
+            }
 
+        }
 
+
 
+        function inlineAll(string, baseUrl, get) {
 
+            if (nothingToInline()) return Promise.resolve(string);
 
+
 
+            return Promise.resolve(string)
 
+                .then(readUrls)
 
+                .then(function (urls) {
 
+                    var done = Promise.resolve(string);
 
+                    urls.forEach(function (url) {
 
+                        done = done.then(function (string) {
 
+                            return inline(string, url, baseUrl, get);
 
+                        });
 
+                    });
 
+                    return done;
 
+                });
 
+
 
+            function nothingToInline() {
 
+                return !shouldProcess(string);
 
+            }
 
+        }
 
+    }
 
+
 
+    function newFontFaces() {
 
+        return {
 
+            resolveAll: resolveAll,
 
+            impl: {
 
+                readAll: readAll
 
+            }
 
+        };
 
+
 
+        function resolveAll() {
 
+            return readAll(document)
 
+                .then(function (webFonts) {
 
+                    return Promise.all(
 
+                        webFonts.map(function (webFont) {
 
+                            return webFont.resolve();
 
+                        })
 
+                    );
 
+                })
 
+                .then(function (cssStrings) {
 
+                    return cssStrings.join('\n');
 
+                });
 
+        }
 
+
 
+        function readAll() {
 
+            return Promise.resolve(util.asArray(document.styleSheets))
 
+                .then(getCssRules)
 
+                .then(selectWebFontRules)
 
+                .then(function (rules) {
 
+                    return rules.map(newWebFont);
 
+                });
 
+
 
+            function selectWebFontRules(cssRules) {
 
+                return cssRules
 
+                    .filter(function (rule) {
 
+                        return rule.type === CSSRule.FONT_FACE_RULE;
 
+                    })
 
+                    .filter(function (rule) {
 
+                        return inliner.shouldProcess(rule.style.getPropertyValue('src'));
 
+                    });
 
+            }
 
+
 
+            function getCssRules(styleSheets) {
 
+                var cssRules = [];
 
+                styleSheets.forEach(function (sheet) {
 
+                    try {
 
+                        util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
 
+                    } catch (e) {
 
+                        console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
 
+                    }
 
+                });
 
+                return cssRules;
 
+            }
 
+
 
+            function newWebFont(webFontRule) {
 
+                return {
 
+                    resolve: function resolve() {
 
+                        var baseUrl = (webFontRule.parentStyleSheet || {}).href;
 
+                        return inliner.inlineAll(webFontRule.cssText, baseUrl);
 
+                    },
 
+                    src: function () {
 
+                        return webFontRule.style.getPropertyValue('src');
 
+                    }
 
+                };
 
+            }
 
+        }
 
+    }
 
+
 
+    function newImages() {
 
+        return {
 
+            inlineAll: inlineAll,
 
+            impl: {
 
+                newImage: newImage
 
+            }
 
+        };
 
+
 
+        function newImage(element) {
 
+            return {
 
+                inline: inline
 
+            };
 
+
 
+            function inline(get) {
 
+                if (util.isDataUrl(element.src)) return Promise.resolve();
 
+
 
+                return Promise.resolve(element.src)
 
+                    .then(get || util.getAndEncode)
 
+                    .then(function (data) {
 
+                        return util.dataAsUrl(data, util.mimeType(element.src));
 
+                    })
 
+                    .then(function (dataUrl) {
 
+                        return new Promise(function (resolve, reject) {
 
+                            element.onload = resolve;
 
+                            element.onerror = reject;
 
+                            element.src = dataUrl;
 
+                        });
 
+                    });
 
+            }
 
+        }
 
+
 
+        function inlineAll(node) {
 
+            if (!(node instanceof Element)) return Promise.resolve(node);
 
+
 
+            return inlineBackground(node)
 
+                .then(function () {
 
+                    if (node instanceof HTMLImageElement)
 
+                        return newImage(node).inline();
 
+                    else
 
+                        return Promise.all(
 
+                            util.asArray(node.childNodes).map(function (child) {
 
+                                return inlineAll(child);
 
+                            })
 
+                        );
 
+                });
 
+
 
+            function inlineBackground(node) {
 
+                // Fix MathJax issue.
 
+                if (!node.style) {
 
+                    return Promise.resolve(node);
 
+                }
 
+
 
+                var background = node.style.getPropertyValue('background');
 
+
 
+                if (!background) return Promise.resolve(node);
 
+
 
+                return inliner.inlineAll(background)
 
+                    .then(function (inlined) {
 
+                        node.style.setProperty(
 
+                            'background',
 
+                            inlined,
 
+                            node.style.getPropertyPriority('background')
 
+                        );
 
+                    })
 
+                    .then(function () {
 
+                        return node;
 
+                    });
 
+            }
 
+        }
 
+    }
 
+})(this);

+ 25 - 0
src/utils/vutils.cpp
查看文件 

@@ -815,6 +815,31 @@ QString VUtils::generateExportHtmlTemplate(const QString &p_renderBg, bool p_inc
 
     return templ;
 
     return templ;
 
 }
 
 }
 
 
 
+QString VUtils::generateMathJaxPreviewTemplate()
 
+{
 
+    QString templ = VNote::generateMathJaxPreviewTemplate();
 
+    QString mj = g_config->getMathjaxJavascript();
 
+    // Chante MathJax to be rendered as SVG.
 
+    QRegExp reg("(Mathjax\\.js\\?config=)\\S+", Qt::CaseInsensitive);
 
+    // mj.replace(reg, QString("\\1%1").arg("TeX-MML-AM_SVG"));
 
+
 
+    templ.replace(HtmlHolder::c_JSHolder, mj);
 
+
 
+    QString extraFile;
 
+    extraFile += "<script type=\"text/x-mathjax-config\">"
 
+                 "MathJax.Hub.Config({\n"
 
+                 "                    tex2jax: {inlineMath: [['$','$'], ['\\\\(','\\\\)']],\n"
 
+                                               "processEscapes: true,\n"
 
+                                               "processClass: \"tex2jax_process|language-mathjax|lang-mathjax\"},\n"
 
+                 "                    showProcessingMessages: false,\n"
 
+                 "                    messageStyle: \"none\"});\n"
 
+                 "</script>\n";
 
+
 
+    templ.replace(HtmlHolder::c_extraHolder, extraFile);
 
+
 
+    return templ;
 
+}
 
+
 
 QString VUtils::getFileNameWithSequence(const QString &p_directory,
 
 QString VUtils::getFileNameWithSequence(const QString &p_directory,
 
                                         const QString &p_baseFileName,
 
                                         const QString &p_baseFileName,
 
                                         bool p_completeBaseName)
 
                                         bool p_completeBaseName)

+ 3 - 0
src/utils/vutils.h
查看文件 

@@ -186,6 +186,9 @@ public:
 
 
 
     static QString generateSimpleHtmlTemplate(const QString &p_body);
 
     static QString generateSimpleHtmlTemplate(const QString &p_body);
 
 
 
+    // Generate template for MathJax preview.
 
+    static QString generateMathJaxPreviewTemplate();
 
+
 
     // Get an available file name in @p_directory with base @p_baseFileName.
 
     // Get an available file name in @p_directory with base @p_baseFileName.
 
     // If there already exists a file named @p_baseFileName, try to add sequence
 
     // If there already exists a file named @p_baseFileName, try to add sequence
 
     // suffix to the name, such as _001.
 
     // suffix to the name, such as _001.

+ 3 - 0
src/vconstants.h
查看文件 

@@ -36,6 +36,9 @@ static const int c_tabSequenceBase = 1;
 
 namespace HtmlHolder
 
 namespace HtmlHolder
 
 {
 
 {
 
     static const QString c_JSHolder = "JS_PLACE_HOLDER";
 
     static const QString c_JSHolder = "JS_PLACE_HOLDER";
 
+    static const QString c_cssHolder = "CSS_PLACE_HOLDER";
 
+    static const QString c_codeBlockCssHolder = "HIGHLIGHTJS_CSS_PLACE_HOLDER";
 
+    static const QString c_globalStyleHolder = "/* BACKGROUND_PLACE_HOLDER */";
 
     static const QString c_extraHolder = "<!-- EXTRA_PLACE_HOLDER -->";
 
     static const QString c_extraHolder = "<!-- EXTRA_PLACE_HOLDER -->";
 
     static const QString c_bodyHolder = "<!-- BODY_PLACE_HOLDER -->";
 
     static const QString c_bodyHolder = "<!-- BODY_PLACE_HOLDER -->";
 
     static const QString c_headHolder = "<!-- HEAD_PLACE_HOLDER -->";
 
     static const QString c_headHolder = "<!-- HEAD_PLACE_HOLDER -->";

+ 6 - 1
src/veditarea.cpp
查看文件 

@@ -1,5 +1,7 @@
 
-#include <QtWidgets>
 
 #include "veditarea.h"
 
 #include "veditarea.h"
 
+
 
+#include <QtWidgets>
 
+
 
 #include "veditwindow.h"
 
 #include "veditwindow.h"
 
 #include "vedittab.h"
 
 #include "vedittab.h"
 
 #include "vnote.h"
 
 #include "vnote.h"
 
@@ -11,6 +13,7 @@
 
 #include "vmainwindow.h"
 
 #include "vmainwindow.h"
 
 #include "vcaptain.h"
 
 #include "vcaptain.h"
 
 #include "vfilelist.h"
 
 #include "vfilelist.h"
 
+#include "vmathjaxpreviewhelper.h"
 
 
 
 extern VConfigManager *g_config;
 
 extern VConfigManager *g_config;
 
 
 
@@ -64,6 +67,8 @@ VEditArea::VEditArea(QWidget *parent)
 
     timer->start();
 
     timer->start();
 
 
 
     m_autoSave = g_config->getEnableAutoSave();
 
     m_autoSave = g_config->getEnableAutoSave();
 
+
 
+    m_mathPreviewHelper = new VMathJaxPreviewHelper(this, this);
 
 }
 
 }
 
 
 
 void VEditArea::setupUI()
 
 void VEditArea::setupUI()

+ 9 - 0
src/veditarea.h
查看文件 

@@ -20,6 +20,7 @@ class VDirectory;
 
 class VFindReplaceDialog;
 
 class VFindReplaceDialog;
 
 class QLabel;
 
 class QLabel;
 
 class VVim;
 
 class VVim;
 
+class VMathJaxPreviewHelper;
 
 
 
 class VEditArea : public QWidget, public VNavigationMode
 
 class VEditArea : public QWidget, public VNavigationMode
 
 {
 
 {
 
@@ -86,6 +87,8 @@ public:
 
     // Return the rect not containing the tab bar.
 
     // Return the rect not containing the tab bar.
 
     QRect editAreaRect() const;
 
     QRect editAreaRect() const;
 
 
 
+    VMathJaxPreviewHelper *getMathJaxPreviewHelper() const;
 
+
 
 signals:
 
 signals:
 
     // Emit when current window's tab status updated.
 
     // Emit when current window's tab status updated.
 
     void tabStatusUpdated(const VEditTabInfo &p_info);
 
     void tabStatusUpdated(const VEditTabInfo &p_info);
 
@@ -224,6 +227,8 @@ private:
 
 
 
     // Whether auto save files.
 
     // Whether auto save files.
 
     bool m_autoSave;
 
     bool m_autoSave;
 
+
 
+    VMathJaxPreviewHelper *m_mathPreviewHelper;
 
 };
 
 };
 
 
 
 inline VEditWindow* VEditArea::getWindow(int windowIndex) const
 
 inline VEditWindow* VEditArea::getWindow(int windowIndex) const
 
@@ -242,4 +247,8 @@ inline VFindReplaceDialog *VEditArea::getFindReplaceDialog() const
 
     return m_findReplace;
 
     return m_findReplace;
 
 }
 
 }
 
 
 
+inline VMathJaxPreviewHelper *VEditArea::getMathJaxPreviewHelper() const
 
+{
 
+    return m_mathPreviewHelper;
 
+}
 
 #endif // VEDITAREA_H
 
 #endif // VEDITAREA_H

+ 46 - 7
src/vlivepreviewhelper.cpp
查看文件 

@@ -1,6 +1,7 @@
 
 #include "vlivepreviewhelper.h"
 
 #include "vlivepreviewhelper.h"
 
 
 
 #include <QDebug>
 
 #include <QDebug>
 
+#include <QByteArray>
 
 
 
 #include "veditor.h"
 
 #include "veditor.h"
 
 #include "vdocument.h"
 
 #include "vdocument.h"
 
@@ -8,12 +9,18 @@
 
 #include "vgraphvizhelper.h"
 
 #include "vgraphvizhelper.h"
 
 #include "vplantumlhelper.h"
 
 #include "vplantumlhelper.h"
 
 #include "vcodeblockhighlighthelper.h"
 
 #include "vcodeblockhighlighthelper.h"
 
+#include "vmainwindow.h"
 
+#include "veditarea.h"
 
+#include "vmathjaxpreviewhelper.h"
 
 
 
 extern VConfigManager *g_config;
 
 extern VConfigManager *g_config;
 
 
 
+extern VMainWindow *g_mainWin;
 
+
 
 // Use the highest 4 bits (31-28) to indicate the lang.
 
 // Use the highest 4 bits (31-28) to indicate the lang.
 
 #define LANG_PREFIX_GRAPHVIZ 0x10000000UL
 
 #define LANG_PREFIX_GRAPHVIZ 0x10000000UL
 
 #define LANG_PREFIX_PLANTUML 0x20000000UL
 
 #define LANG_PREFIX_PLANTUML 0x20000000UL
 
+#define LANG_PREFIX_MATHJAX  0x30000000UL
 
 #define LANG_PREFIX_MASK 0xf0000000UL
 
 #define LANG_PREFIX_MASK 0xf0000000UL
 
 
 
 // Use th 27th bit to indicate the preview type.
 
 // Use th 27th bit to indicate the preview type.
 
@@ -105,6 +112,11 @@ VLivePreviewHelper::VLivePreviewHelper(VEditor *p_editor,
 
     m_plantUMLMode = g_config->getPlantUMLMode();
 
     m_plantUMLMode = g_config->getPlantUMLMode();
 
     m_graphvizEnabled = g_config->getEnableGraphviz();
 
     m_graphvizEnabled = g_config->getEnableGraphviz();
 
     m_mathjaxEnabled = g_config->getEnableMathjax();
 
     m_mathjaxEnabled = g_config->getEnableMathjax();
 
+
 
+    m_mathJaxHelper = g_mainWin->getEditArea()->getMathJaxPreviewHelper();
 
+    m_mathJaxID = m_mathJaxHelper->registerIdentifier();
 
+    connect(m_mathJaxHelper, &VMathJaxPreviewHelper::mathjaxPreviewResultReady,
 
+            this, &VLivePreviewHelper::mathjaxPreviewResultReady);
 
 }
 
 }
 
 
 
 bool VLivePreviewHelper::isPreviewLang(const QString &p_lang) const
 
 bool VLivePreviewHelper::isPreviewLang(const QString &p_lang) const
 
@@ -246,7 +258,8 @@ void VLivePreviewHelper::updateLivePreview()
 
         } else {
 
         } else {
 
             m_document->setPreviewContent(vcb.m_lang, cb.imageData());
 
             m_document->setPreviewContent(vcb.m_lang, cb.imageData());
 
         }
 
         }
 
-    } else if (vcb.m_lang != "puml") {
 
+    } else if (vcb.m_lang != "mathjax") {
 
+        // No need to live preview MathJax.
 
         m_document->previewCodeBlock(m_cbIndex,
 
         m_document->previewCodeBlock(m_cbIndex,
 
                                      vcb.m_lang,
 
                                      vcb.m_lang,
 
                                      removeFence(vcb.m_text),
 
                                      removeFence(vcb.m_text),
 
@@ -365,6 +378,10 @@ void VLivePreviewHelper::processForInplacePreview(int p_idx)
 
                                      vcb.m_lang,
 
                                      vcb.m_lang,
 
                                      removeFence(vcb.m_text),
 
                                      removeFence(vcb.m_text),
 
                                      false);
 
                                      false);
 
+    } else if (vcb.m_lang == "mathjax") {
 
+        m_mathJaxHelper->previewMathJax(m_mathJaxID,
 
+                                        p_idx,
 
+                                        removeFence(vcb.m_text));
 
     }
 
     }
 
 }
 
 }
 
 
 
@@ -373,12 +390,17 @@ void VLivePreviewHelper::updateInplacePreview()
 
     QVector<QSharedPointer<VImageToPreview> > images;
 
     QVector<QSharedPointer<VImageToPreview> > images;
 
     for (int i = 0; i < m_codeBlocks.size(); ++i) {
 
     for (int i = 0; i < m_codeBlocks.size(); ++i) {
 
         CodeBlockPreviewInfo &cb = m_codeBlocks[i];
 
         CodeBlockPreviewInfo &cb = m_codeBlocks[i];
 
-        if (cb.inplacePreviewReady() && cb.hasImageData()) {
 
-            Q_ASSERT(!cb.inplacePreview().isNull());
 
+        if (cb.inplacePreviewReady()) {
 
             // Generate the image.
 
             // Generate the image.
 
-            cb.inplacePreview()->m_image.loadFromData(cb.imageData().toUtf8(),
 
-                                                      cb.imageFormat().toLocal8Bit().data());
 
-            images.append(cb.inplacePreview());
 
+            if (cb.hasImageData()) {
 
+                cb.inplacePreview()->m_image.loadFromData(cb.imageData().toUtf8(),
 
+                                                          cb.imageFormat().toLocal8Bit().data());
 
+                images.append(cb.inplacePreview());
 
+            } else if (cb.hasImageDataBa()) {
 
+                cb.inplacePreview()->m_image.loadFromData(cb.imageDataBa(),
 
+                                                          cb.imageFormat().toLocal8Bit().data());
 
+                images.append(cb.inplacePreview());
 
+            }
 
         }
 
         }
 
     }
 
     }
 
 
 
@@ -387,7 +409,8 @@ void VLivePreviewHelper::updateInplacePreview()
 
     // Clear image.
 
     // Clear image.
 
     for (int i = 0; i < m_codeBlocks.size(); ++i) {
 
     for (int i = 0; i < m_codeBlocks.size(); ++i) {
 
         CodeBlockPreviewInfo &cb = m_codeBlocks[i];
 
         CodeBlockPreviewInfo &cb = m_codeBlocks[i];
 
-        if (cb.inplacePreviewReady() && cb.hasImageData()) {
 
+        if (cb.inplacePreviewReady()
 
+            && (cb.hasImageData() || cb.hasImageDataBa())) {
 
             cb.inplacePreview()->m_image = QPixmap();
 
             cb.inplacePreview()->m_image = QPixmap();
 
         }
 
         }
 
     }
 
     }
 
@@ -407,3 +430,19 @@ void VLivePreviewHelper::webAsyncResultReady(int p_id,
 
     cb.updateInplacePreview(m_editor, m_doc);
 
     cb.updateInplacePreview(m_editor, m_doc);
 
     updateInplacePreview();
 
     updateInplacePreview();
 
 }
 
 }
 
+
 
+void VLivePreviewHelper::mathjaxPreviewResultReady(int p_identitifer,
 
+                                                   int p_id,
 
+                                                   const QString &p_format,
 
+                                                   const QByteArray &p_data)
 
+{
 
+    if (p_identitifer != m_mathJaxID
 
+        || (p_id >= m_codeBlocks.size() || p_data.isEmpty())) {
 
+        return;
 
+    }
 
+
 
+    CodeBlockPreviewInfo &cb = m_codeBlocks[p_id];
 
+    cb.setImageDataBa(p_format, p_data);
 
+    cb.updateInplacePreview(m_editor, m_doc);
 
+    updateInplacePreview();
 
+}

+ 33 - 0
src/vlivepreviewhelper.h
查看文件 

@@ -11,6 +11,7 @@ class VEditor;
 
 class VDocument;
 
 class VDocument;
 
 class VGraphvizHelper;
 
 class VGraphvizHelper;
 
 class VPlantUMLHelper;
 
 class VPlantUMLHelper;
 
+class VMathJaxPreviewHelper;
 
 
 
 class CodeBlockPreviewInfo
 
 class CodeBlockPreviewInfo
 
 {
 
 {
 
@@ -57,6 +58,16 @@ public:
 
         return m_imgData;
 
         return m_imgData;
 
     }
 
     }
 
 
 
+    bool hasImageDataBa() const
 
+    {
 
+        return !m_imgDataBa.isEmpty();
 
+    }
 
+
 
+    const QByteArray &imageDataBa() const
 
+    {
 
+        return m_imgDataBa;
 
+    }
 
+
 
     const QString &imageFormat() const
 
     const QString &imageFormat() const
 
     {
 
     {
 
         return m_imgFormat;
 
         return m_imgFormat;
 
@@ -64,10 +75,20 @@ public:
 
 
 
     void setImageData(const QString &p_format, const QString &p_data)
 
     void setImageData(const QString &p_format, const QString &p_data)
 
     {
 
     {
 
+        m_imgDataBa.clear();
 
+
 
         m_imgFormat = p_format;
 
         m_imgFormat = p_format;
 
         m_imgData = p_data;
 
         m_imgData = p_data;
 
     }
 
     }
 
 
 
+    void setImageDataBa(const QString &p_format, const QByteArray &p_data)
 
+    {
 
+        m_imgData.clear();
 
+
 
+        m_imgFormat = p_format;
 
+        m_imgDataBa = p_data;
 
+    }
 
+
 
     const QSharedPointer<VImageToPreview> inplacePreview() const
 
     const QSharedPointer<VImageToPreview> inplacePreview() const
 
     {
 
     {
 
         return m_inplacePreview;
 
         return m_inplacePreview;
 
@@ -84,6 +105,8 @@ private:
 
 
 
     QString m_imgData;
 
     QString m_imgData;
 
 
 
+    QByteArray m_imgDataBa;
 
+
 
     QString m_imgFormat;
 
     QString m_imgFormat;
 
 
 
     QSharedPointer<VImageToPreview> m_inplacePreview;
 
     QSharedPointer<VImageToPreview> m_inplacePreview;
 
@@ -120,6 +143,11 @@ private slots:
 
 
 
     void localAsyncResultReady(int p_id, const QString &p_format, const QString &p_result);
 
     void localAsyncResultReady(int p_id, const QString &p_format, const QString &p_result);
 
 
 
+    void mathjaxPreviewResultReady(int p_identitifer,
 
+                                   int p_id,
 
+                                   const QString &p_format,
 
+                                   const QByteArray &p_data);
 
+
 
 private:
 
 private:
 
 
 
     bool isPreviewLang(const QString &p_lang) const;
 
     bool isPreviewLang(const QString &p_lang) const;
 
@@ -154,6 +182,11 @@ private:
 
 
 
     VGraphvizHelper *m_graphvizHelper;
 
     VGraphvizHelper *m_graphvizHelper;
 
     VPlantUMLHelper *m_plantUMLHelper;
 
     VPlantUMLHelper *m_plantUMLHelper;
 
+
 
+    VMathJaxPreviewHelper *m_mathJaxHelper;
 
+
 
+    // Identification for VMathJaxPreviewHelper.
 
+    int m_mathJaxID;
 
 };
 
 };
 
 
 
 inline bool VLivePreviewHelper::isPreviewEnabled() const
 
 inline bool VLivePreviewHelper::isPreviewEnabled() const

+ 64 - 0
src/vmathjaxpreviewhelper.cpp
查看文件 

@@ -0,0 +1,64 @@
 
+#include "vmathjaxpreviewhelper.h"
 
+
 
+#include <QDebug>
 
+#include <QWebEngineView>
 
+#include <QWebChannel>
 
+
 
+#include "utils/vutils.h"
 
+#include "vmathjaxwebdocument.h"
 
+
 
+VMathJaxPreviewHelper::VMathJaxPreviewHelper(QWidget *p_parentWidget, QObject *p_parent)
 
+    : QObject(p_parent),
 
+      m_parentWidget(p_parentWidget),
 
+      m_initialized(false),
 
+      m_nextID(0),
 
+      m_webView(NULL),
 
+      m_webReady(false)
 
+{
 
+}
 
+
 
+VMathJaxPreviewHelper::~VMathJaxPreviewHelper()
 
+{
 
+}
 
+
 
+void VMathJaxPreviewHelper::doInit()
 
+{
 
+    Q_ASSERT(!m_initialized);
 
+
 
+    m_webView = new QWebEngineView(m_parentWidget);
 
+    connect(m_webView, &QWebEngineView::loadFinished,
 
+            this, [this]() {
 
+                m_webReady = true;
 
+            });
 
+
 
+    m_webView->hide();
 
+    m_webView->setFocusPolicy(Qt::NoFocus);
 
+
 
+    m_webDoc = new VMathJaxWebDocument(m_webView);
 
+    connect(m_webDoc, &VMathJaxWebDocument::mathjaxPreviewResultReady,
 
+            this, [this](int p_identifier, int p_id, const QString &p_format, const QString &p_data) {
 
+                QByteArray ba = QByteArray::fromBase64(p_data.toUtf8());
 
+                emit mathjaxPreviewResultReady(p_identifier, p_id, p_format, ba);
 
+            });
 
+
 
+    QWebChannel *channel = new QWebChannel(m_webView);
 
+    channel->registerObject(QStringLiteral("content"), m_webDoc);
 
+    m_webView->page()->setWebChannel(channel);
 
+
 
+    m_webView->setHtml(VUtils::generateMathJaxPreviewTemplate(), QUrl("qrc:/resources"));
 
+
 
+    while (!m_webReady) {
 
+        VUtils::sleepWait(100);
 
+    }
 
+
 
+    m_initialized = true;
 
+}
 
+
 
+void VMathJaxPreviewHelper::previewMathJax(int p_identifier,
 
+                                           int p_id,
 
+                                           const QString &p_text)
 
+{
 
+    init();
 
+
 
+    m_webDoc->previewMathJax(p_identifier, p_id, p_text);
 
+}

+ 62 - 0
src/vmathjaxpreviewhelper.h
查看文件 

@@ -0,0 +1,62 @@
 
+#ifndef VMATHJAXPREVIEWHELPER_H
 
+#define VMATHJAXPREVIEWHELPER_H
 
+
 
+#include <QObject>
 
+
 
+class QWebEngineView;
 
+class VMathJaxWebDocument;
 
+class QWidget;
 
+
 
+class VMathJaxPreviewHelper : public QObject
 
+{
 
+    Q_OBJECT
 
+public:
 
+    explicit VMathJaxPreviewHelper(QWidget *p_parentWidget, QObject *p_parent = nullptr);
 
+
 
+    ~VMathJaxPreviewHelper();
 
+
 
+    // Get an ID for identification.
 
+    int registerIdentifier();
 
+
 
+    // Preview @p_text and return SVG data asynchronously.
 
+    // @p_identifier: identifier the caller registered;
 
+    // @p_id: internal id for each caller;
 
+    // @p_text: raw text of the MathJax script.
 
+    void previewMathJax(int p_identifier, int p_id, const QString &p_text);
 
+
 
+signals:
 
+    void mathjaxPreviewResultReady(int p_identifier,
 
+                                   int p_id,
 
+                                   const QString &p_format,
 
+                                   const QByteArray &p_data);
 
+
 
+private:
 
+    void init();
 
+
 
+    void doInit();
 
+
 
+    QWidget *m_parentWidget;
 
+
 
+    int m_initialized;
 
+
 
+    int m_nextID;
 
+
 
+    QWebEngineView *m_webView;
 
+
 
+    VMathJaxWebDocument *m_webDoc;
 
+
 
+    bool m_webReady;
 
+};
 
+
 
+inline int VMathJaxPreviewHelper::registerIdentifier()
 
+{
 
+    return m_nextID++;
 
+}
 
+
 
+inline void VMathJaxPreviewHelper::init()
 
+{
 
+    if (!m_initialized) {
 
+        doInit();
 
+    }
 
+}
 
+#endif // VMATHJAXPREVIEWHELPER_H

+ 23 - 0
src/vmathjaxwebdocument.cpp
查看文件 

@@ -0,0 +1,23 @@
 
+#include "vmathjaxwebdocument.h"
 
+
 
+#include <QDebug>
 
+
 
+VMathJaxWebDocument::VMathJaxWebDocument(QObject *p_parent)
 
+    : QObject(p_parent)
 
+{
 
+}
 
+
 
+void VMathJaxWebDocument::previewMathJax(int p_identifier,
 
+                                         int p_id,
 
+                                         const QString &p_text)
 
+{
 
+    emit requestPreviewMathJax(p_identifier, p_id, p_text);
 
+}
 
+
 
+void VMathJaxWebDocument::mathjaxResultReady(int p_identifier,
 
+                                             int p_id,
 
+                                             const QString &p_format,
 
+                                             const QString &p_data)
 
+{
 
+    emit mathjaxPreviewResultReady(p_identifier, p_id, p_format, p_data);
 
+}

+ 31 - 0
src/vmathjaxwebdocument.h
查看文件 

@@ -0,0 +1,31 @@
 
+#ifndef VMATHJAXWEBDOCUMENT_H
 
+#define VMATHJAXWEBDOCUMENT_H
 
+
 
+#include <QObject>
 
+
 
+class VMathJaxWebDocument : public QObject
 
+{
 
+    Q_OBJECT
 
+public:
 
+    explicit VMathJaxWebDocument(QObject *p_parent = nullptr);
 
+
 
+    void previewMathJax(int p_identifier, int p_id, const QString &p_text);
 
+
 
+public slots:
 
+    // Will be called in the HTML side
 
+
 
+    void mathjaxResultReady(int p_identifier,
 
+                            int p_id,
 
+                            const QString &p_format,
 
+                            const QString &p_data);
 
+
 
+signals:
 
+    void requestPreviewMathJax(int p_identifier, int p_id, const QString &p_text);
 
+
 
+    void mathjaxPreviewResultReady(int p_identifier,
 
+                                   int p_id,
 
+                                   const QString &p_format,
 
+                                   const QString &p_data);
 
+};
 
+
 
+#endif // VMATHJAXWEBDOCUMENT_H

+ 13 - 10
src/vnote.cpp
查看文件 

@@ -111,16 +111,12 @@ QString VNote::generateHtmlTemplate(const QString &p_renderBg,
 
         cssStyle += "img { max-width: 100% !important; height: auto !important; }\n";
 
         cssStyle += "img { max-width: 100% !important; height: auto !important; }\n";
 
     }
 
     }
 
 
 
-    const QString styleHolder("/* BACKGROUND_PLACE_HOLDER */");
 
-    const QString cssHolder("CSS_PLACE_HOLDER");
 
-    const QString codeBlockCssHolder("HIGHLIGHTJS_CSS_PLACE_HOLDER");
 
-
 
     QString templ = VUtils::readFileFromDisk(c_markdownTemplatePath);
 
     QString templ = VUtils::readFileFromDisk(c_markdownTemplatePath);
 
     g_palette->fillStyle(templ);
 
     g_palette->fillStyle(templ);
 
 
 
     // Must replace the code block holder first.
 
     // Must replace the code block holder first.
 
-    templ.replace(codeBlockCssHolder, p_codeBlockStyleUrl);
 
-    templ.replace(cssHolder, p_renderStyleUrl);
 
+    templ.replace(HtmlHolder::c_codeBlockCssHolder, p_codeBlockStyleUrl);
 
+    templ.replace(HtmlHolder::c_cssHolder, p_renderStyleUrl);
 
 
 
     if (p_isPDF) {
 
     if (p_isPDF) {
 
         // Shoudl not display scrollbar in PDF.
 
         // Shoudl not display scrollbar in PDF.
 
@@ -143,7 +139,7 @@ QString VNote::generateHtmlTemplate(const QString &p_renderBg,
 
     }
 
     }
 
 
 
     if (!cssStyle.isEmpty()) {
 
     if (!cssStyle.isEmpty()) {
 
-        templ.replace(styleHolder, cssStyle);
 
+        templ.replace(HtmlHolder::c_globalStyleHolder, cssStyle);
 
     }
 
     }
 
 
 
     return templ;
 
     return templ;
 
@@ -163,18 +159,25 @@ QString VNote::generateExportHtmlTemplate(const QString &p_renderBg)
 
         cssStyle += "img { max-width: 100% !important; height: auto !important; }\n";
 
         cssStyle += "img { max-width: 100% !important; height: auto !important; }\n";
 
     }
 
     }
 
 
 
-    const QString styleHolder("/* BACKGROUND_PLACE_HOLDER */");
 
-
 
     QString templ = VUtils::readFileFromDisk(c_exportTemplatePath);
 
     QString templ = VUtils::readFileFromDisk(c_exportTemplatePath);
 
     g_palette->fillStyle(templ);
 
     g_palette->fillStyle(templ);
 
 
 
     if (!cssStyle.isEmpty()) {
 
     if (!cssStyle.isEmpty()) {
 
-        templ.replace(styleHolder, cssStyle);
 
+        templ.replace(HtmlHolder::c_globalStyleHolder, cssStyle);
 
     }
 
     }
 
 
 
     return templ;
 
     return templ;
 
 }
 
 }
 
 
 
+QString VNote::generateMathJaxPreviewTemplate()
 
+{
 
+    const QString c_templatePath(":/resources/mathjax_preview_template.html");
 
+    QString templ = VUtils::readFileFromDisk(c_templatePath);
 
+    g_palette->fillStyle(templ);
 
+    templ.replace(HtmlHolder::c_cssHolder, g_config->getCssStyleUrl());
 
+    return templ;
 
+}
 
+
 
 void VNote::updateTemplate()
 
 void VNote::updateTemplate()
 
 {
 
 {
 
     QString renderBg = g_config->getRenderBackgroundColor(g_config->getCurRenderBackgroundColor());
 
     QString renderBg = g_config->getRenderBackgroundColor(g_config->getCurRenderBackgroundColor());

+ 2 - 0
src/vnote.h
查看文件 

@@ -114,6 +114,8 @@ public:
 
     // @p_renderBg: background color, empty to not specify given color.
 
     // @p_renderBg: background color, empty to not specify given color.
 
     static QString generateExportHtmlTemplate(const QString &p_renderBg);
 
     static QString generateExportHtmlTemplate(const QString &p_renderBg);
 
 
 
+    static QString generateMathJaxPreviewTemplate();
 
+
 
 public slots:
 
 public slots:
 
     void updateTemplate();
 
     void updateTemplate();

+ 3 - 0
src/vnote.qrc
查看文件 

@@ -210,5 +210,8 @@
 
         <file>resources/themes/v_moonlight/radiobutton_checked_disabled.svg</file>
 
         <file>resources/themes/v_moonlight/radiobutton_checked_disabled.svg</file>
 
         <file>resources/themes/v_moonlight/radiobutton_unchecked_disabled.svg</file>
 
         <file>resources/themes/v_moonlight/radiobutton_unchecked_disabled.svg</file>
 
         <file>resources/icons/universal_entry_tb.svg</file>
 
         <file>resources/icons/universal_entry_tb.svg</file>
 
+        <file>resources/mathjax_preview.js</file>
 
+        <file>resources/mathjax_preview_template.html</file>
 
+        <file>utils/dom-to-image/dom-to-image.js</file>
 
     </qresource>
 
     </qresource>
 
 </RCC>
 
 </RCC>