JavaScriptでマークダウンを動的に解析し、カスタムCSSスタイルを使用するにはどうすればよいですか？

Markdownで書かれたHTMLページを作成するのにStrapdownJSのようなサービスを使いたいです。 StrapdownJSはMarkdownパーサとして機能しますが、カスタムスタイルの必要性は満たしていません。 strapdownJSでは、あなたがそうのようなテーマを選択：JavaScriptでマークダウンを動的に解析し、カスタムCSSスタイルを使用するにはどうすればよいですか？

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

しかし、<head>に<link>または<style>タグを埋め込むことはヘッドがロードされた後StrapdownJSは、スタイリングのすべてがそうであるように、動作しません。これまでのところ私が考えることができる唯一の解決策は、JQueryのようなものですべてのスタイリングをプログラムで変更することです.JQueryはまず最初にスタイルシートを持つという目的を破っています。

誰にでもこの解決策がありますか？私の理想的なソリューションは、マークダウンがstyle.css からスタイリングで解析し、HTMLとしてレンダリングされるマークダウンファイル（例えば、content.md）を指定するCSSスタイルシート

を含めるには、この

使用<link>
のようになります。
これに類似するものがある場合は教えてください。 StrapdownJSはテーマの選択肢が極端に少ないのではなく、Bootswatchのテーマがいくつかあります。

出典

2016-10-09 Nic Aguirre

[Markdown-it]（https://github.com/markdown-it/markdown-it）のようなものはどうですか？それは、あなたがクライアント側にマークダウンを解析している場合は、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>

これは私が探していたまさにことになりました。私はマークダウンを別のファイルに保存し、カスタムスタイルを守りながらそれを動的に解析することができます。もちろんこれはJQueryを使わずに行うことができますが、私はこのアプローチを大いに好んでいます。

出典

2016-10-16 15:32:57

JavaScriptでマークダウンを動的に解析し、カスタムCSSスタイルを使用するにはどうすればよいですか？

答えて

関連する問題