uzitech / marked-katex-extension Goto Github PK
View Code? Open in Web Editor NEWMarkedJS extension for katex syntax
Home Page: https://www.npmjs.com/package/marked-katex-extension
License: MIT License
MarkedJS extension for katex syntax
Home Page: https://www.npmjs.com/package/marked-katex-extension
License: MIT License
I am a developer from China and I saw issue #193
I am struggling with supporting latex in markdown, and this repository has been very helpful to me. However, just like #193 , I encountered the same problem with Chinese punctuation.
So, I hope to change the regular expression to this.
/^(\${1,2})(?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n\$]))\1(?=[\s?!\.,:?!。,:]|$)/
My English proficiency is not good. If there are any mistakes, please forgive me.
Error reported on older versions of Safari:
Invalid regular expression: invalid group specifier name
This is due to the bug in Safari.
I tested it on iOS 13.
Version 2.1.0 has no issues, while version 3.0.3 will throw an error.
$-\log\frac{exp({v_{c}}^{\top}u_{o})}{\sum_{w\in D} exp({v_{c}}^{\top}u_{w})}$
However, the <math>
tag rendered by mathml
cannot be rendered in html2canvas.
The @traptitech/markdown-it-katex
plugin of markdown-it
can render MathML styles very well, but it uses the <html>
tag instead of the <math>
tag.
Marked adds typings via @types/marked
. I'd expect that this package has its types defined somewhere.
It seems like when using marked
without marked-katex
a text like
Check the README:
\```
$ cat README
Hello World!
\```
(don't mind the backslash)
is being rendered as intended, but with marked-katex
, it is required to have at least two line breaks to make it work as intended.
Reproduction
https://svelte.dev/repl/c3a34f8ff6604397b70c3632624e54c5?version=4.2.1
The output of $300 $400
is not correct, its behaving $300 $
as a katex, but you can update it changing the regex to behave like katex input only when there is no space attaching with $
in $...$
, also, are you using the displayMode: true
for the displayMode? Its important to use the actual displayMode option cause otherwise some functions does not works.
check out the https://stackedit.io/app for feature ideas
I'm working on a project that uses CommonJS modules instead of ES modules. When I try to require
the extension, I get an error.
My code:
const { marked } = require( 'marked' );
const markedKatex = require( 'marked-katex-extension' );
The error I'm seeing:
> node src/js/toHtml.js
/Users/liam/,/programs/liam/0ty/src/js/toHtml.js:13
const markedKatex = require( 'marked-katex-extension' );
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/liam/,/programs/liam/0ty/node_modules/marked-katex-extension/src/index.js from /Users/liam/,/programs/liam/0ty/src/js/toHtml.js not supported.
Instead change the require of index.js in /Users/liam/,/programs/liam/0ty/src/js/toHtml.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/Users/liam/,/programs/liam/0ty/src/js/toHtml.js:13:21) {
code: 'ERR_REQUIRE_ESM'
}
I'm happy to use a dynamic import, but I thought I'd open up this issues since your README seems to indicate it's possible to use CommonJS require
. Does the README need to be updated to reflect the fact that you can't use CommonJS require
? Or am I doing something wrong? Thanks!
Currently (when building a project with vite - SvelteKit) i have to import the extension this way:
import markedKatex from "marked-katex-extension/src/index";
This could be resolved by adding libs files for esm syntax (and common js syntax)
I have some documents that use $
for other purposes so to avoid conflicts, the math expressions are quoted with \( ... \)
. I believe it is a common use case so I am planning to add support for it.
I am currently implementing this change. A PR will be opened later.
Both generate the same html code.
How can I add a class or sth to the generate code?
Improving the #193, would it be possible to add the -
character as authorized after the trailing $
character ?
For example, this one does not work without adding an extra space:
$n$-vector
Currently works:
$n$ -vector
Ty.
Hi
When I try to include an inline equation I can't seem to put punctuation after the ending $
. The following examples don't work unless I put a space before the period or comma:
The algorithm has a time complexity of $O(log(n))$.
Let's consider $x$, $y$, and $z$.
Putting a space in any of those locations really doesn't look good, and I think it's incorrect to include the punctuation in the equation itself.
I took a quick look at the regex and I wonder if it's possible to change the final look-ahead from (=?\s|$)
to (=?\W|$)
. The non-word class \W
includes spaces, but also common punctuation, which would resolve my issue.
marked-katex-extension/src/index.js
Line 4 in afea812
npm i marked-katex-extension
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/marked
npm ERR! marked@"^6.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer marked@"^4 || ^5" from [email protected]
npm ERR! node_modules/marked-katex-extension
npm ERR! marked-katex-extension@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/why/.npm/_logs/2023-08-02T11_52_45_953Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /Users/why/.npm/_logs/2023-08-02T11_52_45_953Z-debug-0.log
<!-- App.vue -->
<template>
<div>vue3 import is not displayed correctly</div>
<div v-html="ceFormat"></div>
</template>
<script lang="ts" setup>
import 'katex/dist/contrib/mhchem.min.js' // how use this
import 'katex/dist/katex.min.css' // katex css
import katex from 'katex'
const ceStr = `\\ce{N2 + 3H2 <=>T[High temperature Pressurized][Catalyst] 2NH3}`
const ceFormat = katex.renderToString(
ceStr,
{
throwOnError: false,
strict: 'warn',
})
</script>
<!-- app.html -->
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/mhchem.min.js"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
onload="renderMathInElement(document.body);"
></script>
</head>
<body>
<p>
html direct quote displays correctly
<span class="katex-display">
$$\ce{N2 + 3H2 <=>T[High temperature Pressurized][Catalyst] 2NH3}$$
</span>
</html>
Hello,
I hope you don't mind me raising an issue.
I encountered some problems when using vue3
and katex
to render chemical formulas. They are not displaying properly.
The aforementioned chemical formulas can be displayed correctly when directly referenced in HTML.
Could you please guide me on how to modify the code for vue3 when using your plugin marked-katex-extension
to display chemical formulas correctly?
It seems that I need to use KatexOptions
with macros
, but I couldn't find suitable documentation to implement it. Any guidance would be greatly appreciated.
Thank you so much.
For reference on chemical formulas:
The following equation is not rendered :
$$ A = \begin{bmatrix}
a & b & c \\
d & e & f \\
g & h & i
\end{bmatrix} $$
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.