gpt4 book ai didi

javascript - 如何在 JavaScript 中动态解析 Markdown 并使用自定义 CSS 样式?

转载 作者:行者123 更新时间:2023-11-28 16:01:55 25 4
gpt4 key购买 nike

我想使用类似 StrapdownJS 的服务创建用 Markdown 编写的 HTML 页面。 StrapdownJS 可以很好地用作 Markdown 解析器,但它不能满足我对自定义样式的需求。在 strapdownJS 中,您可以像这样选择一个主题:

<xmp theme="united">
# Markdown here...
</xmp>

但是,嵌入一个 <link><style> <head> 中的标签不起作用,因为 StrapdownJS 在加载头部后完成所有样式。到目前为止,我能想到的唯一解决方案是使用 JQuery 之类的东西以编程方式更改所有样式,这在很大程度上违背了首先使用样式表的目的。

有人对此有好的解决方案吗?我理想的解决方案看起来像这样

  1. 使用<link>包含 CSS 样式表
  2. 指定 Markdown 文件(例如,content.md)
  3. Markdown 被解析并呈现为 HTML,样式来自 style.css

如果有类似的请告诉我。同样,如果不是因为其极其有限的主题选择,StrapdownJS 将是完美的——它只有少数来自 Bootswatch 的主题。 .

最佳答案

我使用 MarkedJS 找到了一种更优雅的方法.
您所要做的就是将您的样式表与 MarkedJS 一起导入。

给定:

dir
|- style.css
|- marked.js
|- jquery.min.js
|- content.md
|- index.html

HTML:

<head>
<link href="style.css" rel="stylesheet">
<script src="marked.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
$.get('content.md', function(data) {
$('#content').html(marked(data));
}, 'text');
</script>
<body>

这正是我要找的东西;我可以将 markdown 保存在一个单独的文件中,并在遵循我的自定义样式的同时动态解析它。您当然可以在没有 JQuery 的情况下执行此操作,但我更喜欢这种方法。

关于javascript - 如何在 JavaScript 中动态解析 Markdown 并使用自定义 CSS 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39944236/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com