在HTML中包含markdown文件內容供remark.js

有沒有（最好是輕量級的方式）在HTML中包含降價文件的原始內容？在HTML中包含markdown文件內容供remark.js

我使用remark.js創建幻燈片，我想保持的降價文件從HTML分開，使HTML是非常簡單的（不改變）：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Test</title> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script> 
    </head> 
    <body> 
    <textarea id="source"> 
     >>'paste' markdown file test.md<< 
    </textarea> 
     <script> 
     var slideshow = remark.create({ 
      highlightStyle: 'darkula', 
      highlightLines: true 
     }); 
     </script> 
    </body> 
</html>

理想情況下，它脫機運行並在本地機器上運行（無需運行Web服務器）。 '粘貼'markdown文件test.md'的位顯然不起作用（因此我的問題）。我已經試過：

object data="test.md"而是產生一個醜陋的iframe
This solution但我只是得到了一個空白頁面（我使用jQuery的一個CDN）。

來源

2017-01-12 Ian

根據remarkjs wiki你需要以下行添加到您的包含文件降價

var slideshow = remark.create({ 
    sourceUrl: 'markdown.md' 
});

下面是一個完整的例子

<!DOCTYPE html> 
<html> 
    <head> 
    <title>A title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <style type="text/css"> 
     @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); 
     @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); 
     @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); 

     body { font-family: 'Droid Serif'; } 
     h1, h2, h3 { 
     font-family: 'Yanone Kaffeesatz'; 
     font-weight: normal; 
     } 
     .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; } 
    </style> 
    </head> 
    <body> 
    <script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript"> 
    </script> 
    <script type="text/javascript"> 
     var slideshow = remark.create({ 
     sourceUrl: 'your_file.md' 
     }); 
    </script> 
    </body> 
</html>

來源

2017-05-12 16:32:13 hungptit

在HTML中包含markdown文件內容供remark.js

回答

相關問題