在 Markdown 中嵌入 JavaScript

Embed javascript in markdown

提问by Paul Tarjan

I'm using the Maruku markdown processor. I'd like this

我正在使用 Maruku 降价处理器。我想要这个

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

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

but it complains when I render it with a multitude of errors. The first one being

但是当我用大量错误渲染它时它会抱怨。第一个是

 ___________________________________________________________________________
| 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[|

and then the rest seems like the parser is going nuts. Then it renders the javascript into a div on the page. I've tried making it a CDATA block and extra spacing between the jquery and my script.

然后其余的似乎解析器发疯了。然后它将 javascript 渲染到页面上的 div 中。我试过使它成为一个 CDATA 块和 jquery 和我的脚本之间的额外间距。

Help?

帮助？

采纳答案by S M

I had this same problem, but I managed to get JavaScript to appear in my code by putting a newline after the opening tag.

我遇到了同样的问题，但我设法通过在开始标记后放置一个换行符来让 JavaScript 出现在我的代码中。

回答by Timothée Boucher

Different solution that might work in some cases: (the selected answer didn't work for me when I was trying to embed a CodePen example)

在某些情况下可能有效的不同解决方案：（当我尝试嵌入 CodePen 示例时，所选答案对我不起作用）

• add this to your default layout:

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

• In posts where you need some JavaScript files, you can add them in the YAML front matter like so:

  ---
  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
  ---
  

• 将此添加到您的默认布局：

  <!-- 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
  ---
  

The asyncmight not be necessary or wanted but you could probably add that as a parameter in customjs. (see YAML front matter for Jekyll and nested listsfor details)

在async可能没有必要或希望，但你很可能添加的是，由于参数customjs。（有关详细信息，请参阅Jekyll 和嵌套列表的 YAML 前端问题）

回答by Mike Chelen

Markdown supports inline XHTML but not Javascript.

Markdown 支持内联 XHTML 但不支持 Javascript。

回答by Jon Purdy

The example they give on their siteshows an empty <script>tag containing a newline. Maybe that's it?

他们在其网站上给出的示例显示了一个<script>包含换行符的空标签。也许就是这样？

回答by sergeidave

I found that escaping the closing '>' symbol in both, the opening and closing 'script' tags, will display it correctly, for example:

我发现在开始和结束 'script' 标签中转义结束 '>' 符号将正确显示它，例如：

• If you type the follwing:

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

• It will be rendered like this:

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

• 如果您键入以下内容：

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

• 它将呈现如下：

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

That's just my two cents.

那只是我的两分钱。

回答by John MacFarlane

You could use pandoc, which handles this input (and javascript generally) just fine.

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

回答by milkmeat

To my experience, markdown will outpus javascript text as plain text as long as you remove the code formatting that may confuse markdown.

根据我的经验，只要您删除可能会混淆 markdown 的代码格式，markdown 就会将 javascript 文本作为纯文本输出。

1. remove comments from javascript, as /* ... */ is translated to < em>
2. remove the space indent in the front of each line. < p> may be inserted according to your indentation.

1. 从 javascript 中删除注释，因为 /* ... */ 被翻译成 < em>
2. 删除每行前面的空格缩进。< p> 可能会根据您的缩进插入。

Basically what I do is to review the generated html and find out what extra tags are inserted in between my javascript code by markdown. And remove the formatting that generates the extra tag.

基本上我所做的是查看生成的 html 并通过 Markdown 找出在我的 javascript 代码之间插入了哪些额外的标签。并删除生成额外标签的格式。

回答by Claudiu Creanga

A good idea is to have local and cloud js sources separated:

一个好主意是将本地和云 js 源分开：

In the post file:

在帖子文件中：

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  

In the default file after footer inclusion:

在页脚包含后的默认文件中：

   {% 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 %}

回答by PhanThanh

Just indent the first line contains < script > tag.

只需缩进包含 <script> 标签的第一行。