使用.md在html中呈现marked.js文件
我试图在html页面的<body>组件中呈现一个标记文件(<body>)。我偶然发现了marked.js。
这些文档介绍了以下用法：
marked.parse('# Marked in the browser\n\nRendered by **marked**.');这对于我想要做的事情很有效(它以html格式呈现标记)。但是，我希望marked.parse调用中的输入是一个.md文件，这样我就不必在简单的引号屏障之间写入所有内容。
我试过：
marked.parse(src='file.md');和
marked.parse('href=file.md');但这不管用。
有什么建议吗？
回答 2
Stack Overflow用户
发布于 2022-09-03 18:24:49
这里的派对可能有点晚了。不管怎样..。
我正在使用marked.js的平面文件-CMS我正在工作。在那里，我使用PHP将文件内容读取到DOM对象中。
<div class='md'><?= htmlspecialchars(file_get_contents('file.md')); ?></div>从那里开始，应该像文件所建议的那样直截了当：
<script>
let el = document.getElementsByClassName['md'][0];
el.innerHTML = marked.parse(el.innerHTML);
</script>或者解析站点上每个“.md”容器的内容：
<script>
Array.from(document.getElementsByClassName['md']).forEach( (el) => {
el.innerHTML = marked.parse(el.innerHTML);
});
</script>Stack Overflow用户
发布于 2022-09-13 19:04:33
我突然意识到，您可以使用JavaScript fetch API来代替它，并在客户端保留全部内容。
fetch( 'https://example.com/file.md' )
.then( response => response.text() )
.then( (result) => {
var content = marked.parse(result);
document.querySelector( '#my-container' ).innerHTML = content;
});fetch是一个承诺。它从指定的URL抓取文件，并使用标记立即进行解析。(显然，将querySelector更改为选择目标元素。)
另外，当提取出错时，您可能需要添加一些错误处理。如下所示：
...
.then( (response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.text();
})
...我强烈建议，调查一下这里的安全问题。根据您要做的事情，您可能无法控制文件的内容。只是JS，但还是…
您可以找到有关fetch API 这里的更多资源。
https://stackoverflow.com/questions/72557262
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号