obedm503 / showdown-katex Goto Github PK
View Code? Open in Web Editor NEWMath typesetting for showdown
Home Page: https://obedm503.github.io/showdown-katex/
License: MIT License
Math typesetting for showdown
Home Page: https://obedm503.github.io/showdown-katex/
License: MIT License
add node as a target without bundling to lib/
. so just transpile and reference the katex
node module
I want to configure this extension for Latex of type
$a + b$
\begin{equation}
\frac{1}{2}
\end{equation}
Hello,
Thanks for sharing this plugin.
I noticed the npm package is three years old. How can we install the version in this repository? I failed to generate the dist/
directory.
As shown in the image captured from the demo webpage, https://obedm503.github.io/showdown-katex, $
formular need to double \
to make it work
Attach the codes below:
### 1. $ formular need to double `\` to make it work For example ```latex \left\{ \begin{array}{ccccc} 2x_1 & -x_2 & 1.5x_3 & = & 8 \\ x_1 & & -4x_3 & = & -7 \end{array} \right. ``` if what get the same effects in in `$$$` `$$$` blocks, `\left\{` need to change to `\left\\{` and `\\` need to change to `\\\\` $$\left\\{ \begin{array}{ccccc} 2x_1 & -x_2 & 1.5x_3 & = & 8 \\\\ x_1 & & -4x_3 & = & -7 \end{array} \right.$$
Alternatively, I have to use javascript to replace those strings in the website to make it work.
var md_1 = md.replace(/\\{2}/g, "\\\\\\\\")
var md_2 = md_1.replace(/\\\{/g, "\\\\\{");
var md_3 = md_2.replace(/\\\}/g, "\\\\\}")
Hi.
This is an amazing plugin to showdown.
I have a problem.
By default, I always filter HTML before outputting it via <script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
This works with regular markdown.
But when I apply filterXSS(html)
on this package, It displays the <math>
and <svg>
code as filterXSS()
strips the tags.
Is there any way out to fix this?
Describe the bug:
There is rendering issue when using katex and latex modifiers
(La)TeX code:
The code of (La)TeX you tried to render:
~${\displaystyle |\psi \rangle =\alpha |0\rangle +\beta |1\rangle }~
use this same code and text on https://katex.org/
Expected behavior:
from: latex.codecogs.com
Screenshots:
le
of displaystyle is rendered ๐คฆโโ๏ธ
Environment (please complete the following information):
When I tried to write \ne
in latex format or !=
in asciimath format, the strike in the equal sign was misaligned. This happen even on the demo page on https://obedm503.github.io/showdown-katex/#sandbox
Lines 30 to 32 in eaf3647
Hi,
We found the following issue in our project: ls1intum/Artemis#768
E.g. the formula $ a_0 + a_1 $
is not displayed correctly for us, as the html that the extension receives already splits this expression into 3 separate nodes:
0: text -> "$ a"
1: em -> "0 + a"
2: text -> "1 $"
I wonder if the extension should use the type 'lang' instead of 'output', but would be interested in your opinion on this matter:
https://github.com/obedm503/showdown-katex/blob/master/src/showdown-katex.js#L71
with the intention of moving towards a 1.0.0 stable release I'm opening this issue for anyone to voice their opinions on the behavior and api of the extension.
some of the things I would like to change include:
showdown-katex
: since this is a showdown extension that serves as a bridge to katex, I believe the name change makes it easier to understand what this project isshowdownKatex.config
katex.config
. I also don't what to use the katex
namespace.displayMode: true
~
surrounding the asciimath (~ y = mx + b ~
). why not single backtick like MathJax? because this is markdown. backticks already mean something in markdown. In fact the single tilde seems just as readable as the single backtick for inline mathany input is welcome
In order to avoid confusion, it's better to mention output option in README:
{
displayMode: true,
throwOnError: false, // allows katex to fail silently
errorColor: '#ff0000',
delimiters: [
{ left: '$$', right: '$$', display: false },
{ left: '~', right: '~', display: false, asciimath: true },
],
output: 'mathml'
}
Otherwise I am getting duplicate output in html and mathml, which is weird.
Here is the docs on this option: https://katex.org/docs/options.html
use .replace(/[-[\]/{}()*+?.\\$^|]/gi, '\\$&')
instead
I am using it with Vue-ShowDown and Getting this error
My Complete Code Goes Here
<template>
<div>
<center>
<p>Enter the Latex</p>
<p>
<v-flex xs6 offset-xs1>
<v-textarea label="Latex" v-model="data"></v-textarea>
</v-flex>
</p>
</center>
<VueShowdown style="font-size:30px" :markdown="data" :extensions="[highlight, katex]" />
</div>
</template>
<script>
import ShowdownHighlight from "showdown-highlight";
import ShowdownKatex from "showdown-katex";
export default {
name: "App",
components: {},
data: () => ({
data: "",
highlight: ShowdownHighlight,
katex: ShowdownKatex({
// maybe you want katex to throwOnError
throwOnError: true,
// disable displayMode
displayMode: false,
// change errorColor to blue
errorColor: "#1500ff"
})
}),
created() {}
};
</script>
Good morning,
I'm new to both node js and showdown. I'm experiencing the "window is not defined" error, while if I try other showdown extensions like twitter and youtube I don't have this problem. Can you please give me a suggestion?
Thank you
Here is my code:
/* server.js */
function render_md(path) {
//var fs = require('fs');
var showdown = require('showdown'),
katex = require('showdown-katex'),
twitter = require('showdown-twitter'),
youtube = require('showdown-youtube'),
converter = new showdown.Converter({
extensions: ['twitter','youtube','katex'],
ghCompatibleHeaderId: true,
headerLevelStart: 3,
simplifiedAutoLink: false,
excludeTrailingPunctuationFromURLs: false,
literalMidWordUnderscores: false,
strikethrough: false,
tables: true,
ghCodeBlocks: true,
ghMentions: false,
smoothLivePreview: false,
smartIndentationFix: false,
disableForced4SpacesIndentedSublists: false,
simpleLineBreaks: true,
requireSpaceBeforeHeadingText: false,
encodeEmails: true
}/*{
extensions: [showdownKatex({
displayMode: true,
throwOnError: false,
errorColor: '#ff0000',
delimiters: [
{ left: "$$", right: "$$", display: false }, // katex default
{ left: '~', right: '~', display: false, asciimath: true },
],
})]
}*/),
//text = '# hello, markdown!',
text = require('fs').readFileSync(path, 'utf-8'),
html = converter.makeHtml(text);
return html;
};
Is there a CDN link that can be used directly in browser?
As in the previous image shows, here is the code for test:
This works: text text text $$\mathbf{x}_0, \mathbf{x}_1 = A \mathbf{x}_0, \mathbf{x}_2 = A \mathbf{x}_1$$, text text -> $$x_1$$ <- text However if want $$x_{1+k}$$ in previous sentenses which has two inline forumlar: text text text $$\mathbf{x}_0, \mathbf{x}_1 = A \mathbf{x}_0, \mathbf{x}_2 = A \mathbf{x}_1$$, text text -> $$x_{1+k}$$ <- text Seems don't work
Is there a way to use
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false },
],
but it doesn't work.
I input the matrix,for example
$ \begin{matrix} 1 & 2 \\ 3 & 4 \\ \end{matrix} $
,
But the output seems don't correct
Would you like to give me some suggestion?
thanks a lot
Not relevant anymore. Issue can be deleted.
The system complains "'BABEL_ENV' is not recognized as an internal or external command".
showdown-katex/package-scripts.js
Lines 17 to 31 in eaf3647
This is similar magento/pwa-studio#898: the use of BABEL_ENV=build
at the beginning of a command is fine on Unix, but not on M$ Win*. The following screenshot shows that the command works on WSL (Windows Subsystem for Linux)
The linked PR's author suggests adding the node.js package cross-env
in the dependencies. Lacking knowledge in node.js, I'll leave that for others to think about.
Can someone help me with why the below data isn't rendered properly by the extension ?
extensions: [
showdownKatex({
throwOnError: true,
errorColor: '#1500ff',
macros: {
href: "{}"
},
delimiters: [
{left: "$", right: "$", display: false},
{left: "\(", right: '\)', display: false},
{left: "$$", right: "$$", display: true},
{left: "\[", right: '\]', display: true},
],
}),
],
### Read problem statements in [Hindi](http://www.codechef.com/download/translated/APRIL19/hindi/XORMIN.pdf), [Bengali](http://www.codechef.com/download/translated/APRIL19/bengali/XORMIN.pdf), [Mandarin Chinese](http://www.codechef.com/download/translated/APRIL19/mandarin/XORMIN.pdf), [Russian](http://www.codechef.com/download/translated/APRIL19/russian/XORMIN.pdf), and [Vietnamese](http://www.codechef.com/download/translated/APRIL19/vietnamese/XORMIN.pdf) as well.<br /><br />You are given a rooted tree with $N$ vertices (numbered $1$ through $N$); vertex $1$ is the root. Each vertex has a weight; let's denote the weight of vertex $i$ by $w_i$.<br /><br />You should answer $Q$ queries. The queries have to be processed online, i.e. to obtain each query, you need the answer to the previous query.<br /><br />In each query, you are given a vertex $v$ and a parameter $k$. For each vertex $u$ in the subtree of $v$ (including $v$), consider the value $w_u \oplus k$ ($\oplus$ denotes the bitwise XOR operation). The answer to this query is the maximum of these values and the smallest $u$ such that vertex $u$ is in the subtree of vertex $v$ and $w_u \oplus k$ is equal to this maximum.<br /><br />### Input<br />- The first line of the input contains a single integer $T$ denoting the number of test cases. The description of $T$ test cases follows.<br />- The first line of each test case contains two space-separated integers $N$ and $Q$.<br />- The second line contains $N$ space-separated integers $w_1, w_2, \ldots, w_N$.<br />- Each of the next $N-1$ lines contains two space-separated integers $x$ and $y$ denoting that there is an edge between nodes $x$ and $y$.<br />- The next $Q$ lines describe queries. Each of these lines contains two space-separated integers $a$ and $b$. The parameters $v$ and $k$ can be obtained in the following way: let's denote the value and vertex from the answer to the previous query by $x_l$ and $v_l$ respectively ($x_l = v_l = 0$ if this is the first query); then, $v = a \oplus v_l$ and $k = b \oplus x_l$.<br /><br />### Output<br />For each query, print a single line containing two space-separated integers โ the answer to the query, i.e. the number of the vertex for which we get the maximum value and the maximum value.<br /><br />### Constraints <br />- $1 \le T \le 1,000$<br />- $1 \le N \le 2 \cdot 10^5$<br />- $1 \le Q \le 10^6$<br />- $1 \le x, y, v \le N$<br />- $1 \le w_i \lt 2^{20}$ for each valid $i$<br />- $1 \le k \lt 2^{20}$<br />- the sum of $N$ over all test cases does not exceed $2 \cdot 10^5$<br />- the sum of $Q$ over all test cases does not exceed $10^6$<br /><br />### Subtasks<br />**Subtask #1 (10 points):**<br />- the sum of $N$ over all test cases does not exceed $5,000$<br />- the sum of $Q$ over all test cases does not exceed $5,000$<br /><br />**Subtask #2 (15 points):**<br />- the sum of $N$ over all test cases does not exceed $2,000$<br />- the sum of $Q$ over all test cases does not exceed $10^6$<br /><br />**Subtask #3 (75 points):** original constraints<br /><br />### Example Input<br />```<br />1<br />10 5<br />9 17 93 16 3 61 23 11 2 1<br />1 2<br />2 5<br />5 8<br />1 3<br />1 4<br />3 6<br />3 7<br />6 9<br />6 10<br />4 14<br />7 123<br />5 103<br />9 32<br />5 118<br />```<br /><br />### Example Output<br />```<br />4 30<br />7 114<br />8 30<br />3 99<br />6 40<br />```<br />
add a sandbox to the demo page to allow users to test out how the extension works.
input should be markdown -> output should be pretty html
Hi!
Thank you for your very useful project. I am already using it in combination with bootmark, it is great. I am wondering if you are planning to add the auto-render extension of KaTeX see here.
This allows to simply enter LaTeX commands between $ signs in the web pages.
Thank you for your help,
Cheers.
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.