在 Markdown 中嵌入 JavaScript

Question

我正在使用 Maruku 降價處理器。 我想要這個

*blah* blah "blah" in [markdown](blah)

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
...do stuff...
</script>

但是當我用大量錯誤渲染它時它會抱怨。 第一個是

 ___________________________________________________________________________
| Maruku tells you:
+---------------------------------------------------------------------------
| Could you please format this better?
| I see that "<script type='text/javascript'>" is left after the raw HTML.
| At line 31
|   raw_html     |<script src='http://code.jquery.com/jquery-1.4.2.min.js' /><script type='text/javascript'>|
|       text --> |//<![CDATA[|

然后其余的似乎解析器發瘋了。 然后它將 javascript 渲染到頁面上的 div 中。 我試過使它成為一個 CDATA 塊和 jquery 和我的腳本之間的額外間距。

幫助？

Answer 1

我遇到了同樣的問題，但我設法通過在開始標記后放置一個換行符來讓 JavaScript 出現在我的代碼中。

Answer 2

在某些情況下可能有效的不同解決方案：（當我嘗試嵌入 CodePen 示例時，所選答案對我不起作用）

• 將此添加到您的默認布局：

   <!-- Custom JavaScript files set in YAML front matter --> {% for js in page.customjs %} <script async type="text/javascript" src="{{ js }}"></script> {% endfor %}

• 在需要一些 JavaScript 文件的帖子中，您可以將它們添加到 YAML 前端，如下所示：

   --- layout: post title: Adding custom JavaScript for a specific post category: posts customjs: - http://code.jquery.com/jquery-1.4.2.min.js - http://yourdomain.com/yourscript.js ---

async可能不是必需的或不需要的，但您可以將其添加為customjs的參數。 （有關詳細信息，請參閱Jekyll 和嵌套列表的 YAML 前端問題）

Answer 3

我使用這段代碼在 Markdown 中編寫 JavaScript 代碼。

只需在"```"之后添加js ，您的 JavaScript 代碼就會高亮顯示。

 ```js
   const myvar = "hello"
   module.exports.response = response = ()=>{mycode here}
    ```

Answer 4

Markdown 支持內聯 XHTML 但不支持 Javascript。

Answer 5

他們在其網站上給出的示例顯示了一個包含換行符的空<script>標簽。 也許就是這樣？

Answer 6

我發現在開始和結束 'script' 標簽中轉義結束 '>' 符號將正確顯示它，例如：

• 如果您鍵入以下內容：

   <script\\>... javascript code...</script\\>

• 它將呈現如下：

   <script>... javascript code...</script>

那只是我的兩分錢。

Answer 7

您可以使用pandoc ，它可以很好地處理此輸入（以及通常的 javascript）。

Answer 8

我用一個名為 Showdown 的庫構建了一個快速服務器，它將 Markdown 轉換為 HTML，並且還允許您在 Markdown 文件中使用 HTML，這就是我能夠使用 javascript 並鏈接到我的 css 文件的方式。

目錄文件

<script src="/js/toc"></script>

服務器.js

app.get('/js/toc', (req, res) => {
    fs.readFile(path.join(__dirname, 'public', 'js', 'toc.js'), 'utf-8', (err, data) => {
        if(err) throw err;
        res.set({
            'Content-Type': 'text/javascript'
        })
        res.send(data)
    })
})

或者您可以使用快速靜態中間件來做到這一點。 您只需要將您的 javascript 文件放在一個名為 public 的文件夾中。

目錄文件

<script src="/static/js/toc.js"></script>

服務器.js

app.use('/static', express.static('public'))

Answer 9

根據我的經驗，只要您刪除可能會混淆 markdown 的代碼格式，markdown 就會將 javascript 文本作為純文本輸出。

1. 從 javascript 中刪除注釋，因為 /* ... */ 被翻譯成 < em>
2. 刪除每行前面的空格縮進。 < p> 可能會根據您的縮進插入。

基本上我所做的是查看生成的 html 並通過 Markdown 找出在我的 javascript 代碼之間插入了哪些額外的標簽。 並刪除生成額外標簽的格式。

Answer 10

一個好主意是將本地和雲 js 源分開：

在帖子文件中：

cloudjs:
 - //cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js
 - //cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js
localjs:
 - datamaps.world.min.js
 - custom.js  

在頁腳包含后的默認文件中：

   {% for js in page.cloudjs %}

        <script type="text/javascript" src="{{ js }}"></script>

    {% endfor %}


    {% for js in page.localjs %}

        <script type="text/javascript" src="{{ "/assets/scripts/" | prepend: site.baseurl | append: js }}"></script>

    {% endfor %}

Answer 11

只需縮進包含 <script> 標簽的第一行。