[FEATURE] Latex Math

[rkirner]

Script name

Latex Math

Script authors

@r00tr4v3n, @Aganel

Expected behavior

Produce html rendering of KLatex formulas (high quality vector format)
An efficient implementation would be desireable, as in scientific notes it is quite common to have more than 100 formulas inside one note.

Actual behavior

Produces bitmap rendering of KLatex formulas, which is significantly less visually pleasing compared to other note-taking tools that are capable of html rendering.

Steps to reproduce

Just write any math formula $c^2 = a^2 + b^2$.

Output from the debug section in the settings dialog

(not relevant)

[pbek]

Produce html rendering of KLatex formulas (high quality vector format)

I don't think the QTextBrowser of the preview would be able to render that...

[CJendantix]

#266 would add support for this, excluding rendering in the preview (which is likely impossible with scripts alone).

[bessw]

I had the same problem quite some time ago. It is possible to get this working in the preview if you render the latex math to svg. I did create a plugin for this, but didn't publish it, because I didn't have the time to implement local rendering and just used a web service (https://latex.codecogs.com/) as temporary solution. Maybe someone else has the time to implement local rendering using something like mathjax. Also the caching could be improved by using a hash of the formula instead of the array index for the file name, but then this would also require some kind of garbage collection of old files.

Here is my code, maybe it helps:

import QtQml 2.0
import QOwnNotesTypes 1.0
import com.qownnotes.noteapi 1.0

/**
 * This script renders LaTeX math on the fly
 */
QtObject {
    // the path to the script's directory will be set here
    property string scriptDirPath;
    
    property var images;
    property string tmpPath;
    property var inlineLaTeXRegExp : /\\\(((?:.|\n)*?)\\\)/g;
    property var blockLaTeXRegExp : /\\\[((?:.|\n)*?)\\\]/g;
    property var inlineLaTeXDollarRegExp : /(\s)\$((?:[^\t\f\v \$][^\$]*?)*?[^\t\f\v \$])\$(\s)/g;
    property var blockLaTeXDollarRegExp : /(\s)\$\$((?:[^\t\f\v \$][^\$]*?)*?[^\t\f\v \$])\$\$(\s)/g;
    
    function init() {
        images = new Map();
        tmpPath = scriptDirPath + script.dirSeparator() + "tmp";
        
        cleanTmp()
    }
    
    function noteOpenedHook(note) {//note has been switched
        cleanTmp();
    }
    
    
    function preNoteToMarkdownHtmlHook(note, markdown, forExport) {
        
        markdown = markdown.replace(inlineLaTeXRegExp, latexMath);
        markdown = markdown.replace(blockLaTeXRegExp, latexMath);
        markdown = markdown.replace(inlineLaTeXDollarRegExp, latexMath);
        markdown = markdown.replace(blockLaTeXDollarRegExp, latexMath);
        
        return markdown;
    }
    
    /*function noteToMarkdownHtmlHook(note, html, forExport) {
        
        html = html.replace(inlineLaTeXRegExp, latexMath);
        html = html.replace(blockLaTeXRegExp, latexMath);
        html = html.replace(inlineLaTeXDollarRegExp, latexMath);
        html = html.replace(blockLaTeXDollarRegExp, latexMath);
        
        return html;
    }*/
    
    function latexMath(match, pre, math, post) {
        if (! images.has(math)) {
            generateImg(math);
        }
        return pre + '<img src="' + images.get(math) + '"></img>' + post;
    }
    
    /**
     * Generates image from latex
     * 
     * @param latex {string}
     * @return result {Promise} image has been inserted in images {Map}
     */
    function generateImg(latex) {
        // use the webservice to generate and download the image
        var url = "http://latex.codecogs.com/svg.latex?" + latex;
        var img = script.downloadUrlToString(url);
        
        var filePath = tmpPath + script.dirSeparator() + images.size + '.svg';
        
        var result = script.writeToFile(filePath , img);
        if (result) {
            images.set(latex, filePath);
        }
        return result;
    }
    
    function cleanTmp() {
        //TODO: delete files in tmpPath
        images.clear();
    }
}

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 14 days since being marked as stale.