带有 Pandoc 的内联 CSS

2024-04-23

如果在某处记录了以编程方式实现此目的的简单方法(不是通过在浏览器字段中复制/粘贴并单击按钮进行转换),我深表歉意。在我的搜索和阅读中我找不到它。

我想以编程方式将 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>

我正在将 Markdown 转换为 HTMLPandoc https://pandoc.org/

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 来实现此目的,但我找不到方法。

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

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


编辑 2023/03/24: The --self-containedflag 现在已贬值 - pandoc 会自动将其转换为--embed-resources --standalone,应该使用它来代替。

简而言之:

  • -s/--standalone“默认情况下,pandoc 会生成一个文档片段。要生成独立文档(例如,包含 和 的有效 HTML 文件),请使用-s or --standalone flag"

  • --embed-resource“生成一个没有外部依赖项的独立 HTML 文件...”


对于大多数人来说,这是一个更好的选择-H是使用--self-contained option:

使用以下命令生成没有外部依赖项的独立 HTML 文件 data:包含链接脚本、样式表内容的 URI 图像和视频。

然后你可以这样做:

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

这样,您就不需要创建特殊的.css带有样式标签的文件。注意-s不再需要,因为--self-contained暗示-s(虽然它不疼)。

请注意,这将尝试包含显示页面所需的任何其他资源(如有必要,请从网上下载它们!) - 检查 pandoc 文档--self-contained了解详情。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有 Pandoc 的内联 CSS 的相关文章

  • css伪类最后一个子问题

    我在使用时遇到问题 last child伪选择器 我有以下标记 div class apply container div
  • 无法在 css 中使用 .ani 光标?

    我自定义了网站的光标 但是CSS光标 url 仅适用于 gif png 或 cur 我想使用 ani 文件 但它只能在 IE 中使用 cursor url img mcursor cur auto IE 使用 Windows API 支持
  • 带有子 div 的 div 的背景颜色

    div div This is a text inside a div element div div We are still in the div element div div Why isnt the background colo
  • 检测视频何时缓冲,如果缓冲则显示 gif

    我想知道是否有办法在视频缓冲时显示 gif 我正在使用 HTML5 视频标签 其中有一种方法可以检测视频何时缓冲 如果没有 是否有替代方法 我看过 如何检测视频何时缓冲 https stackoverflow com questions 1
  • JavaFX 2:TableView:删除标题+空时显示网格

    我有两个关于 Javafx 2 中的 TableView 的问题 1 是否可以隐藏表格中的标题 2 当表为空时 它只显示一个白色窗格 上面写着 表中没有内容 是否可以更改此设置以显示默认网格 即使表格为空 如果可能的话 我想要一个带有 CS
  • application.css 未作为资产提供

    编辑4 5和6 8小时后 欢迎任何更多的想法 也许这个错误已经被知道并解决了 但是当你在 app assets stylesheets 的 css erb 文件中有这个时 我得到了我在编辑 2 3 中描述的行为 li background
  • 使用javascript隐藏html元素

    JavaScript function hide article var htmlElement document getElementsByTagName article 0 htmlElement setAttribute visibi
  • 如何在 scss 中包含仅限 Safari 的样式? [复制]

    这个问题在这里已经有答案了 我只是想修改仅适用于 safari 浏览器的样式属性 这将覆盖默认属性 简单的例子 Default div color blue Safari 浏览器 div color red 我想这可以通过 scss 的 i
  • jQuery 输入事件在 IE 中的占位符上触发

    我有一个输入字段input绑定到它的事件 通过 jQuery 每次输入值更改时都应触发此事件 我添加了一个占位符来告诉用户此输入字段的用途 如果用户单击此输入字段input不应触发事件 该值实际上不会改变 只是占位符消失 它在 Firefo
  • 突出显示 Html 文档中不同标签的文本

    我是新来的角js 现在我正在突出显示 HTML 文档中的文本 So 我的代码是这样的 var InstantSearch highlight function container highlightText var internalHigh
  • 如何删除垂直滚动条 SyntaxHighlighter 块?

    我是网络开发的新手 可能有一个主要问题 我已经在我的网站上安装了 Joomla 2 5 CMS 下载 安装并打开语法荧光笔 http alexgorbatchev com SyntaxHighlighter 插入 然后启用bash语法并在我
  • 在网页上写乐谱[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我希望能够在网页中编写乐谱和和弦 有没有可用的库 例如用于数学的 Mathjax 如果没有 那么还有其
  • contenteditable,在文本末尾设置插入符号(跨浏览器)

    输出在Chrome div style border 1px solid 000 width 500px height 40px hey div what s up div div div div
  • CSS 比例和方形中心裁剪图像

    所以我的应用程序中有一个缩略图集合 其大小为200x200 有时原始图像没有这个比例 所以我计划将此图像裁剪为正方形 目前它只是拉伸图像以适合缩略图 所以说我的原始图像大小是400x800 那么图像看起来就很压扁 我想裁剪此图像 以便它查看
  • jQuery 无法在外部 JavaScript 中工作

    我是 jQuery 新手 遇到了一些奇怪的问题 我正在使用 jQuery 的change and click方法 在我的 HTML 文件中使用时它们工作正常
  • 使用 jQuery 对 CSS 变换进行动画处理

    我正在尝试为 div 制作动画 并让它绕 y 轴旋转 180 度 当我调用以下代码时 出现 jQuery 错误 my div animate transform rotateY 180deg webkit transform rotateY
  • 页面其余部分完成加载后延迟加载 html5 视频

    我有一个视频元素用作我正在构建的页面底部部分的背景 我试图通过将 src 存储为 data src 属性并使用 jQuery 在其他资源加载后将其应用到 src 属性 因为它不是英雄图像或任何东西 我想加载海报以节省加载时间 然后稍后加载视
  • 检测 iPad Safari 用户的最佳方法

    添加用于检测 iPad Safari 用户的代码的最佳方法是什么 我的意思是我们应该使用 1 CSS 通过链接媒体 2 JS 通过navigator对象 我听说使用用户代理字符串并不是检测 iPad 的最佳方法 因为存在不一致的情况 请建议
  • 具有 MVC4 风格捆绑的 Intellisense

    到目前为止我找不到问题或解决这个问题 我确信我错过了一些简单的事情 我有一个带有一堆缩小的 CSS 的样式包 并且我正在用里面的类来装饰 HTML 元素 一切都运转良好 然而 Intellisense 和 ReSharper 都因为 CSS
  • 使用命令行将 MediaWiki 维基文本格式转换为 HTML

    我倾向于编写大量文档 因此 MediaWiki 格式对我来说很容易理解 而且比编写传统 HTML 节省了我很多时间 然而 我也写了一篇博客 发现一直从键盘切换到鼠标来输入正确的 HTML 标签会增加很多时间 我希望能够使用 Mediawik

随机推荐

  • 在 bash 中使用 ssh 内的 Expect 执行 sudo

    我想创建一个脚本来自动在多个 Linux 主机上进行安装 我使用 ssh 密钥登录到主机 在登录中我想做一个 sudo 我正在尝试使用 Expect 我在站上有它 但是我的服务器上没有运行脚本 我该怎么做 这是我的尝试 但没有运气 bin
  • 如何以编程方式将审阅者分配给 Azure DevOps Pull 请求?

    我知道如何使用 gitHttpClient 在 VSTS 中创建拉取请求 如下所示gitHttpClient CreatePullRequestAsync gitPullRequest repositoryId Result 但我不知道如何
  • Permission_required 装饰器不适合我

    我不明白为什么需要许可的装饰器不起作用 我想只允许工作人员访问视图 我努力了 permission required request user is staff login url admin def series info request
  • 使用 sql helper(Microsoft.ApplicationBlocks.Data) 时出现超时问题

    我在处理长sql查询时遇到超时问题 长查询超时的数据集是 static public DataSet Getxxxx Guid xxxx DataSet ds SqlHelper ExecuteDataset ConnectionStrin
  • 一般错误:1215 无法在 Laravel 中添加外键约束

    进行迁移时我收到此错误 SQLSTATE HY000 一般错误 1215 无法添加外键约束 SQL alter tablebooks添加约束books writer id foreign外键 writer id 参考writers id 我
  • 如何以编程方式按名称获取 Angular 服务

    我有一个字符串 其中包含我需要以编程方式注入到我的控制器之一中的服务名称 function Ctrl var serviceName myService var service 我认为做类似的事情应该很容易 function Ctrl in
  • Monodroid 环境变量

    在 Android 中 Android OS Environment 提供了一组可用的环境路径 但是 当考虑到跨平台功能时 我想将图片存储在图片文件夹中 因此考虑使用 System Environment GetFolderPath 然而
  • 设计允许对单个控制器操作进行令牌身份验证

    我有一个网络应用程序 它对所有控制器使用设计数据库身份验证 但是我希望有一个控制器操作 其中身份验证也使用令牌完成 我可以为此使用设备吗 制定策略有valid 调用以确定是否应启用策略的方法 这允许您在每个控制器 操作的基础上控制可用的身份
  • try...catch 中的隐式类型变量

    我喜欢对几乎所有事情使用隐式类型 因为它干净而简单 但是 当我需要在单个语句周围包装 try catch 块时 我必须打破隐式类型以确保变量具有定义的值 这是一个人为的假设示例 var s abc I want to avoid expli
  • Angular 4指令错误:无法解析指令的所有参数

    我对 Angular 完全陌生并尝试注入基本结构指令 https angular io guide structural directives the myunless property来自角度指南 这是我的指令 import Direct
  • RouteTable.Routes 和 HttpConfiguration.Routes 之间的区别?

    我想知道为什么路由似乎可以从 HttpConfiguration 对象和 RouteTable 类进行配置 显然 这两个 Routes 属性不是同一类型 但它们似乎保持同步 他们有可能不同步吗 但我想知道 从 Web API 的角度来看 R
  • 如何通过该计时器的回调函数更改 System.Threading.Timer 中的间隔时间?

    如何通过该计时器的回调函数更改 System Threading Timer 中的时间间隔 它是否正确 这样做 没有发生 public class TestTimer private static Timer timer new Timer
  • Excel 组合框 listfillrange 属性指向基于公式的命名范围有问题

    当 Excel 中的 ActiveX 组合框对象的 ListFillRange 引用基于公式的命名范围 定义的名称 时 它们的行为不佳 我认为我遇到了其他错误 甚至可能因此导致 Excel 崩溃 但现在发生的只是只要工作簿中的任何单元格发生
  • UITextField 键盘不出现

    我有一个非常简单的屏幕 其中有一个具有默认配置的 UITextField 没有什么特别的 当我触摸 UITextField 时 键盘不会弹出 我没有任何自定义控件 行为或其他任何东西 但它不起作用 我在以前的应用程序 iPhone iPad
  • android:MotionLayout 子级的可见性更改

    我一定是错过了 android 的一些东西 运动布局中的可见性变化 这是我的布局的简化版本
  • 有没有办法从 Scala 中的 Manifest[List[X]] 中提取项目类型?

    我知道某个东西是基于我传递给方法的清单的 List 但我需要知道该列表是什么类型的项目 这些信息是否存储在清单中的某个位置并且您可以将其取出吗 如果没有 关于如何解决该问题有什么建议吗 基本上 我有一个 Map Manifest Blah
  • 适用于 BlackBerry 应用程序的 OAuth 库(适用于 Twitter 客户端)

    是否有可用于与 BlackBerry 应用程序集成的 OAuth 库 我想从我的应用程序发布一条推文 但找不到任何有助于登录的内容 找到了吗this URL http developerlife com tutorials p 648但无法
  • 文本字段旁边的提交按钮具有相同的高度

    我试图与文本字段旁边的提交按钮完美对齐 每个按钮都有自己的字体大小 问题是我在不同的浏览器中得到不同的结果 我的网站支持 IE7 和所有现代浏览器 这是我正在做的事情 http jsfiddle net bxTfn 18 http jsfi
  • 如何使用 NumPy 的广播来加速相关性计算?

    我正在尝试利用NumPy 广播 https docs scipy org doc numpy user basics broadcasting html和后端数组计算可显着加快此功能 不幸的是 它的扩展性不太好 所以我希望能够大大提高它的性
  • 带有 Pandoc 的内联 CSS

    如果在某处记录了以编程方式实现此目的的简单方法 不是通过在浏览器字段中复制 粘贴并单击按钮进行转换 我深表歉意 在我的搜索和阅读中我找不到它 我想以编程方式将 Markdown 和 CSS 文件转换为听起来可能称为 内联 CSS 的文件 例