LaTeX/Mathjax Support

HTTTY · November 8, 2021, 2:22pm

I would really appreciate if Memex could support LaTeX/Mathjax (wrap math equations in dollar signs). It is going to be extremely significant for users in the academia (including STEM students). I wish the feature exists everytime I want to clip some equations or even just inline math symbols from websites like Wikipedia and Stackoverflow, but I have to clear the mess these symbols cause and mannually type the equation myself.
I’m aware of one and a half webpage to md extensions that support this, one being Maoxian web clipper, the other one half being a fork of Markdownload (see its active pull requests), but as far as I know, there is no web highlighter that supports LaTeX well. It would a great addition to Memex since almost all PKM tools on the market support rendering LaTeX expressions wrapped in dollar signs, and it’s almost a common practice for modern markdown editors too.
For implementing this, I suggest looking into Mathjax, the aforementioned extensions, and open-source markdown editors and PKM tools like Logseq.

BlackForestBoi · November 17, 2021, 8:05pm

We just released our updated editor based on Tiptap.dev.

It allows now to easily add these additions. If anyone wants to help implementing it, there are a few people who did id with that editor, but for vue, not react.

github.com/ueberdosis/tiptap

KaTeX Integration

opened 06:19AM - 27 Jan 19 UTC

closed 07:08AM - 29 Jan 19 UTC

wngu6

feature request

It would be great if there was an extension that uses KaTeX, sort of like Dropbo…x Paper but better. There should be one for inline mode and another for display mode. When editing maths, especially for display mode, it would be great if it allows multiple lines. This is my attempt in display math mode. ``` import { Node } from "tiptap" import { toggleBlockType, setBlockType, textblockTypeInputRule } from "tiptap-commands" import katex from "katex" export default class DisplayMath extends Node { get name() { return "displaymath" } get schema() { return { attrs: { content: { default: "" } }, content: "text*", marks: "", group: "block", defining: true, draggable: false, parseDOM: [ { tag: "displaymath", getAttrs: dom => ({ content: dom.getAttribute("content") }) } ], toDOM: node => [ "displaymath", { content: node.attrs.content }, ["div"], ["textarea", 0] ] } } get view() { return { props: ["node", "updateAttrs", "editable"], data: function () { return { edit: true } }, watch: { content: function (newContent, oldContent) { katex.render(this.content, this.$refs.disp, { throwOnError: false }) } }, computed: { content: { get() { return this.node.attrs.content }, set(content) { this.updateAttrs({ content }) } } }, mounted() { katex.render(this.content, this.$refs.disp, { throwOnError: false }) }, methods: { change() { this.edit = true; }, update() { this.edit = false; } }, template: ` <div> <div ref="disp" @click="change"></div> <textarea v-if="edit" class="katex-input" v-model="content" @focusout="update"></textarea> </div> ` } } inputRules({ type }) { return [ textblockTypeInputRule(/^\$\$\$$/, type) ] } } ``` I modeled it after ```Iframe.js```.

Get in touch if you’re interested: support@memex.garden

HTTTY · November 19, 2021, 2:37am

Thanks for the response! I was actually more refering to correctly highlighting math equations on the web page and converting them to proper LaTeX code, while what you suggested seems to be for the note editor. Nonetheless, it would still be good news for academic users if the latter is implemented. For the former, I guess some sort of wrapper needs to be added to the highlighting or annotation components in Memex to generate code from matching HTML elements. If anyone wants to do it, I suggest ckecking out Roam Highlighter. Although it also doesn’t correctly recognize LaTeX, it recognizes many other rich-text formats like bold or links and converts them into Markdown. That would also be an additional benefit for any user who wants rich-text formats in their highlights.