标签: javascript-marked

我们的应用程序是使用 Material-UI 库（带有主题）构建的。作为此应用程序的一部分，我们将 markdown 解析为 html（标记库）。

如何将material-ui主题（Typography）应用到纯html？

不知何故

<div dangerouslySetInnerHTML={ {__html: marked(markdown code)}}/>

应该具有由material-ui Typography 定义的样式

我正在尝试使用 React 和标记的节点包构建一个 Markdown 预览器。当我尝试解析 DOM 上的任何降价时，一切正常。当我这样做时，我收到一条错误消息：Uncaught TypeError：标记不是函数。

我已经在文件顶部标记了声明，如下所示：

import { useState } from "react";
import "./App.css";
const marked = require("marked");

我也尝试像这样声明标记：

import { useState } from "react";
import "./App.css";
const { marked } = require("marked");

但这似乎没有什么区别。

这是我的代码配置：

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked(mrkdwn),
              }}
            ></div>
          </div>

我也尝试过：

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked.parse(mrkdwn),
              }}
            ></div>
          </div>

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked.parser(mrkdwn),
              }}
            ></div>
          </div>

和

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: …

有哪些选项可以解析Markdown文档并处理其元素以输出另一个Markdown文档？

让我们说吧

```
# unaffected #
```

# H1 #

H1
==

## H2 ##

H2
--

### H3 ###

应转换为

```
# unaffected #
```

## H1 ##

H1
--

### H2 ###

### H2 ###

#### H3 ####

在节点环境中.目标元素可以变化(例如,####可以转换为**).

该文档可能包含其他应保持不受影响的标记元素.

如何获得？显然,不使用正则表达式(使用正则表达式而不是完整的词法分析器会影响# unaffected #).我希望使用,marked但它似乎只能输出HTML,而不是Markdown.

因此,我正在运行一个小型测试应用程序,以便在访问路径时以html格式返回markdown文件的内容.我使用标记来渲染降价(https://github.com/chjj/marked).

在这里,我们到目前为止 -

app.get('/test', function(req, res) {
  var path = __dirname + '/markdown/test.md'
  var file = fs.readFile(path, 'utf8', function(err, data) {
    if(err) {
      console.log(err)
    }
    return data.toString()
  })
  res.send(marked(file))
})

当我导航到localhost:3000时,我得到了 -

TypeError:无法调用undefined方法'replace'请将此报告给https://github.com/chij/marked.

我很确定我正在尝试发送一个字符串,而res.send('Hello World!')的工作正常.对不起,我是Node和express的新手,所以我还在搞清楚.任何帮助深表感谢.

我正在尝试用Angular2制作一个简单的Markdown内联编辑器.我尝试了几种方法,但似乎都没有效果.我安装了npm标记,现在可以在项目node_modules目录中看到它.我可以导入它,它被netbeans识别.现在,当我使用它没有任何作用,如果我打开firefox debuger然后我发现localhost:3000 /标记未找到.

我把降价转换器放在一个服务中.看起来如下:

import { Injectable } from 'angular2/core';

import * as marked from 'marked';

interface IMarkdownConfig {
  sanitize?: boolean,
  gfm?: boolean,
  breaks?: boolean,
  smartypants?: boolean
}

@Injectable()
export class MarkdownService {
  //private md: MarkedStatic;

  constructor() {
    //this.md = marked.setOptions({});
  }

  setConfig(config: IMarkdownConfig) {
   // this.md = marked.setOptions(config);
  }

  convert(markdown: string): string {
    if(!markdown) {
      return '';
    }
    return markdown;
    //return this.md.parse(markdown);
  }
}

像这样使用一切正常,除了降价没有翻译.如果我用md取消注释所有行,它就会停止工作.我正在使用它的组件看起来像这样:

import {Component, Input, OnInit } from 'angular2/core';
import {RouteParams} from 'angular2/router';

import {MarkdownService}  from …

你如何使用带有HighlightJS标记的npm ？我正在尝试自动解析和设置我的文档。查看标记文档中的以下示例：

// Using async version of marked
marked(markdownString, function (err, content) {
  if (err) throw err;
  // console.log(content);
});

// Synchronous highlighting with highlight.js
marked.setOptions({
  highlight: function (code) {
    return require('highlight.js').highlightAuto(code).value;
  }
});

console.log(marked(markdownString)); 

我不知道如何使用README.md文件而不是带有手动转义特殊字符的字符串。使用示例不涉及对.md文档的任何引用作为markdownString.

如何将 Markdown 字符串作为文档（如形成一个名为 的文件README.md）而不是手动转义的字符串传递，并且最终输出还包括样式？

目标是能够传入一个 linted（我正在使用 VS 代码markdownlint）README.md、主文档 CSS 和/或 highlightJS css 并具有最后一行的返回值 ( marked(markdownString)) 是我可以直接写入的内容.html文件。

另一个注意事项：我的降价文件还指定了多行代码块中的语言。例如，我的 README.md 中的多行 JSON 块如下所示：

**BODY**:  

```JSON
{
  "username": "example@example.com",
  "p2setting": "4xx72" …

我在我的网站上使用了markedjs降价解析器，但表格语法的样式不正确（没有边框和条纹）。我的代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Marked in the browser</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>

    document.getElementById('content').innerHTML =
        marked(`
First Header | Second Header
------------ | -------------
Content Cell | Content Cell
Content Cell | Content Cell
        `);
</script>
</body>
</html>

我的应用程序需要一个相对简单的降价解析器。只是简单的东西，比如粗体、斜体等。我四处寻找图书馆，许多似乎都很大。例如，marked非常受欢迎，有 20,000 颗星。它接近 2,000 行代码。我什至不确定这个有多大，但它看起来很复杂。

一般来说，我尽量让事情保持简单，并尽可能限制我的依赖。我不确定所有这些行在做什么？我很高兴很快就找到了这个库，它甚至不到 100 行，它只是使用一个简单的正则表达式将文本转换为相应的 Markdown。

我的问题是，基本上，其他图书馆在做什么？通过选择使用更简单的、以正则表达式为中心的方法，我是否遗漏了什么？后一个库在某种程度上不安全吗？我应该考虑其他一些我不知道的因素吗？

显然，我遗漏了一些重要的东西，因为前一个库似乎很受欢迎，而后一个库甚至没有一颗星。我只是不确定那是什么。我希望情况是后者适用于简单情况，如果您需要，前者更“完整”，但我不想跳到那个结论。

我正在从 api 获取带有 markdown 的字符串，并尝试在反应本机项目中使用它们。

是否有任何类似的库可以在react-native中使用来标记，或者实现相同结果的最佳实践是什么？

我正在开发一个 Vue + Nuxt + Tailwind 项目，并使用标记库将文本转换为 Markdown。

问题是，某些样式（例如“标题”和“链接”）可以正确加载，而某些基本样式（例如“粗体”、“斜体”）则可以正常加载。

例如：

• 当我使用“*hello* world”时，它会转换为“ hello world”。
• 当我使用“#hello world”时，它不会增加文本的大小。
• 当我使用“[google]( https://google.com )”时，它确实创建了一个链接，但该链接不是蓝色的。

不确定这里的问题是什么。如果需要更多详细信息，请告诉我。

人们可以按照Marked 库文档并内联渲染 Markdown 字符串。这是一个工作代码片段。

<div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked.parse('# Hello Ayan \n\nRendered by **marked**.');
  </script>

有没有办法将文件传递到marked.parse函数或通过任何其他客户端 Markdown 渲染库并渲染整个文件而不仅仅是字符串？我研究了获取 markdown 文件并将其作为字符串传递。但是，我找不到直接的方法。

该文件与此 HTML 文件位于同一文件夹中，并将使用 GitHub Pages 从 GitHub 提供服务。不过，如果需要，我可以使用 CDN 的绝对链接。我如何将内容传递给marked.parse()？marked.parse(Hello.md)没用。

我正在 Cypress 中进行无头测试，并且必须运行

npm install --save-dev start-server-and-test这样服务器就可以启动并等待 url 响应，然后再运行测试。自从我运行该命令以来，我的代码一直抛出以下错误。而且我不知道这是否是巧合。

Error: src/app/article/markdown.pipe.ts:2:25 - error TS2307: Cannot find module 'marked' or its corresponding type declarations.

2 import * as marked from 'marked';

这是我的markdown.pipe.ts文件：

import { Pipe, PipeTransform } from '@angular/core';
import * as marked from 'marked';

@Pipe({name: 'markdown'})
export class MarkdownPipe implements PipeTransform {
  transform(content: string): string {
    return marked(content, { sanitize: true });
  }
}

我尝试删除node_modules然后package-lock.json运行 ​​npm install 但这并没有解决问题。我在 stackoverflow 上搜索了类似的帖子，一些建议是运行

npm install -g …

我有一个 vue/vie 项目，在该项目中我试图使用 markdown 将我的 markdown 文件读取到 html 中。

我尝试使用 fetch api 将其作为字符串导入，但只是因为我无法弄清楚如何在 vue 中使用 node.js 代码。

这是 vue 文件：

<script setup>
import { marked } from 'marked'
</script>

<script>
export default {
    data() {
        return {
            query: this.getQueryVariable("q"),
            markdown: ''
        }
    },
    mounted() {
        fetch('../src/markdown/About.md')
            .then(response => response.text())
            .then(text => this.markdown = text)
        document.querySelector('.marked').innerHTML = marked.parse(this.markdown)
    }
}
</script>

<template>
    <div class='marked'>
    </div>
</template>