Back to packages list

Vals using marked

Description from the NPM package:
A markdown parser built for speed

Converts markdown string into HTML string. Usage example:

Create valimport { markdownToHtml } from "https://esm.town/v/xkonti/markdownToHtml"; export const getHtml = (() => { return markdownToHtml(` # Hello there How are you doing *these* days? `); })();
1
2
3
4
5
import { marked } from "npm:marked";
export const markdownToHtml = (markdown: string): string => {
return marked.parse(markdown);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { email } from "https://esm.town/v/std/email?v=9";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
export const email_apod = (async () => {
const marked = await import("npm:marked");
const apod = await fetchJSON("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY");
const output = `
<h1> ${apod.title}</h1>
<p>${apod.explanation}</p>
<img src="${apod.url}" />
`;
const res = await email({
subject: `APOD: ${apod.title}`,
html: output,
});
return res;
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { art_criticism_app } from "https://esm.town/v/char_lie/art_criticism_app";
export const art_app = async (req: Request) => {
const marked = await import("npm:marked");
const art_info = await art_criticism_app();
return new Response(
marked.parse(`
${art_info.idea}
========================
![image info](${art_info.art.src})
*Verdict*: ${art_info.criticism}
`),
{ headers: { "Content-Type": "text/html" } },
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
export const markdownExample = async (req: Request) => {
const marked = await import("npm:marked");
return new Response(
marked.parse(`
Using Marked, a Markdown Parser
========================
[Marked](https://marked.js.org) is a widely used markdown parser.
Here, we've imported it using \`const marked = await import("npm:marked");\`!
`),
{ headers: { "Content-Type": "text/html" } },
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { set } from "https://esm.town/v/std/set?v=11";
import { email } from "https://esm.town/v/std/email?v=9";
import { coffee } from "https://esm.town/v/davidmchan/coffee";
export const updateCoffee = async (req: express.Request, res: express.Response) => {
let data = req.query.type;
const d = new Date();
const marked = await import("npm:marked");
if (
data != coffee.last_update ||
d.getTime() - coffee.last_update_time > (5 * 60 * 1000)
) {
coffee.last_update_time = d.getTime();
coffee.last_update_str = d.toLocaleString("en-US", {
timeZone: "America/Los_Angeles",
});
if (data === "decaf") {
coffee.decaf -= 1;
coffee.last_update = "decaf";
}
else if (data === "normal") {
coffee.normal -= 1;
coffee.last_update = "normal";
}
// Email me if there's no more coffee!
await email({
text: "Current Coffee Status:\n" +
"Decaf: " + coffee.decaf + "\n" +
"Normal: " + coffee.normal + "\n",
subject: "Coffee Update!!",
});
}
await set("coffee", coffee);
res.send(marked.parse(`
Thanks for refilling the Coffee!
========================
Bags of Decaf Remaining: ${coffee.decaf}
Bags of Normal Remaining: ${coffee.normal}
`));
};

marked

marked is a classic Markdown parser in JavaScript. I really don't like it! I don't recommend it! The people who made it and worked on it are great, but I think you really shouldn't use it.

  • It supports a non-standard variation of Markdown, so you can't easily switch to another parser once you've encouraged people to write "in the marked style"
  • It allows but doesn't sanitize HTML, which promotes a lot of XSS attacks
  • It doesn't use an intermediate AST like remark or support plugins.

Really it's a much better idea to use micromark or remark.

1
2
3
4
export let markedExample = (async () => {
const marked = await import("npm:marked");
return marked.parse("**Bold text!**");
})();
1
2
3
4
5
6
7
8
9
10
export const markdownExample = async (req: express.Request, res: express.Response) => {
const marked = await import("npm:marked");
res.send(marked.parse(`
Using Marked, a Markdown Parser
========================
[Marked](https://marked.js.org) is a widely used markdown parser.
Here, we've imported it using \`const marked = await import("npm:marked");\`!
`));
};
1
Next