Question

很抱歉，是否在某处记录了一种简单的编程方式（而不是通过复制/粘贴在浏览器字段中并单击按钮进行转换）。在搜索和阅读中我找不到它。

我想以编程方式将Markdown和CSS文件转换为听起来像“内联” CSS的文件。例如：

此Markdown文件（file.md）

# Install
Install instructions

## Update
Update instructions

此CSS文件（style.css）

h1 {
    font-size: 100px;
}

h2 {
    color: red;
}

成为这个（file.html）

<h1 style="font-size: 100px;"><a id="install"></a>Install</h1>
<p>Install instructions</p>
<h2 style="color: red;"><a id="update"><a>Update</h2>
<p>Update instructions</p>

我正在使用Pandoc

将Markdown转换为HTML

pandoc -f markdown -t html file.md -o file.html

当我使用

pandoc -f markdown -t html file.md -o file.html --css=style.css --self-contained

（或--standalone）

返回

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
    <head>
      <meta charset="utf-8" />
      <meta name="generator" content="pandoc" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
      <title>file</title>
      <style type="text/css">
          code{white-space: pre-wrap;}
          span.smallcaps{font-variant: small-caps;}
          span.underline{text-decoration: underline;}
          div.column{display: inline-block; vertical-align: top; width: 50%;}
      </style>
      <style type="text/css">h1 {font-size: 100px;}h2 {color: red;}</style>
      <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
      <![endif]-->
    </head>
    <body>
      <h1><a id="install"></a>Install</h1>
      <p>Install instructions</p>
      <h2><a id="update"><a>Update</h2>
      <p>Update instructions</p>
    </body>
    </html>

如上所述，这不是我的目标。我希望CSS严格“内联”：

<h1 style="font-size: 100px;"><a id="install"></a>Install</h1>

有没有人知道已经编写的工具或脚本可以通过编程方式实现？我已经搜索过了，空了出来。理想情况下，我可以使用Pandoc，但我找不到方法。

我不在乎HTML的<head>和<style>块是否存在。该HTML将通过cURL发送到内容管理系统，该系统会剥离除<body>中的内容和任何“内联” CSS之外的所有HTML元素。

感谢您的任何想法或为我指明方向。

Answer 1

对于大多数人来说，比 -H 更好的选择是使用 --self-contained 选项：

<块引用>

生成一个没有外部依赖的独立 HTML 文件，使用数据：用于合并链接脚本、样式表、图片和视频。

然后你可以这样做：

pandoc -f markdown -t html file.md -o file.html --self-contained --css=github-pandoc.css

这样，您就无需创建带有样式标签的特殊 .css 文件。请注意，-s 不再是必需的，因为 --self-contained 暗示 -s（虽然它没有伤害）。

请注意，这将尝试包含显示页面所需的任何其他资产（如有必要，请从网上下载它们！） - 查看 --self-contained 的 pandoc 文档了解详细信息。

Answer 2

我这样做的方法是利用0.0.0.0选项在html标头中包含一个文件。这意味着您需要使用-H标签包装css文件（因此从严格意义上讲，它实际上不再是css文件）。这样创建输出：

<style> </style>

Answer 3

我有类似的情况，发现premailer。使用pip install premailer安装并用作python3 -m premailer -f INPUT.html -o OUT.html。

信用：https://qiita.com/kimagure/items/6820e2df2a7604047862

Answer 4

自发布此问题以来，我碰到的另一个解决方案是Juice npm package，它也提供了CLI。

它提供了使用样式表和如下脚本将CSS内联放置的功能：

juice --css style.css original.html final.html

使用Pandoc内联CSS

4 个答案: