使用Pandoc内联CSS

csbfibhn 于 2023-03-24 发布在其他

关注(0)|答案(4)|浏览(220)

我很抱歉，如果一个简单的方法，以编程方式（而不是复制/粘贴在浏览器字段，并单击按钮转换）是记录在某处。在我的搜索和阅读，我找不到它。
我想以编程方式将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

(or --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元素。
谢谢你的任何想法或指出我的方向。

css

来源：https://stackoverflow.com/questions/54816884/inline-css-with-pandoc

4条答案

按热度按时间

plupiseo1#

EDIT 2023/03/24：--self-contained标志现在折旧了-- pandoc会自动将其转换为--embed-resources --standalone，应该改用--embed-resources --standalone。

简而言之：

-s/--standalone“默认情况下，pandoc生成文档片段。要生成独立文档（例如包含和的有效HTML文件），请使用-s或--standalone flag“
--embed-resource“生成一个没有外部依赖关系的独立HTML文件...”

对于大多数人来说，比-H更好的选择是使用--self-contained选项：
使用以下数据生成没有外部依赖项的独立HTML文件：包含链接脚本、样式表、图像和视频内容的URI。
然后您可以：

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

这样，你就不需要创建一个特殊的带有样式标签的.css文件。注意，-s不再是必需的，因为--self-contained意味着-s（尽管它没有伤害）。
请注意，这将尝试包括显示页面所需的任何其他资源（如果需要，请从网上下载它们！）-查看--self-contained的pandoc文档以获取详细信息。

赞(0）回复(0）举报 2023-03-24

41zrol4v2#

我的方法是使用-H选项在html头中包含一个文件。这意味着你需要用<style> </style>标签 Package 你的css文件（所以从严格意义上讲，它不再是一个真正的css文件了）。输出是这样创建的：

pandoc -f markdown -t html file.md -o file.html -H style.css -s

赞(0）回复(0）举报 2023-03-24

cx6n0qe33#

我有一个类似的场景，找到了premailer。用pip install premailer安装，并作为python3 -m premailer -f INPUT.html -o OUT.html使用。
信用：https://qiita.com/kimagure/items/6820e2df2a7604047862

赞(0）回复(0）举报 2023-03-24

fdx2calv4#

自从发布这个问题以来，我碰巧遇到的另一个解决方案是Juice npm package，它也提供了一个CLI。
它提供了使用样式表内联放置CSS的能力，脚本如下所示：
juice --css style.css original.html final.html

赞(0）回复(0）举报 2023-03-24