如何在JavaScript中动态解析降价并使用自定义CSS样式？

我想使用像StrapdownJS这样的服务来创建用Markdown编写的HTML页面。 StrapdownJS和Markdown解析器的功能一样，但它不能满足我对自定义样式的需求。在strapdownJS，你选择一个主题，像这样：如何在JavaScript中动态解析降价并使用自定义CSS样式？

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

然而，在<head>嵌入<link>或<style>标签不能正常工作，后头部被加载StrapdownJS完成所有的造型。到目前为止，我能想到的唯一解决方案就是通过编程方式改变所有样式，比如JQuery，这在很大程度上破坏了首先有样式表的目的。

有没有人有这个好的解决方案？我的理想的解决方案会是这个样子

使用<link>包括CSS样式表
指定的降价文件（例如，content.md）
降价被解析并从style.css

呈现为HTML与造型

请让我知道是否有类似的东西。同样，如果不是因为其极为有限的主题选择，StrapdownJS将会是完美的 - 它只有Bootswatch的少数主题。

来源

2016-10-09 Nic Aguirre

那么像[Markdown-it]（https://github.com/markdown-it/markdown-it）呢？它会给你解析的HTML，你可以发送给客户端，如果你正在做servside，或者如果你正在解析客户端的降价，使用jQuery或香草JavaScript呈现。由于这只是普通的HTML，你可以使用任何你喜欢的CSS。 – tobloef

我发现使用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，但我更喜欢这种方法。

来源

2016-10-16 15:32:57

如何在JavaScript中动态解析降价并使用自定义CSS样式？

回答

相关问题