css Marp-CLI:如何使用导入默认主题的自定义主题

jecbmhm3  于 2023-06-07  发布在  其他
关注(0)|答案(2)|浏览(691)

我正在使用marp-cli创建演讲幻灯片。为了微调幻灯片内容,我创建了一个自定义css,它扩展了在marp默认css模板中实现的一些样式规则。

我的目标:我想将css规则外部化到一个custom-theme.css文件中,并将它们从幻灯片内容所在的.md文档中删除。
问题:当使用带有--theme-set选项的marp-cli调用custom-theme.css时,我不能指定css“扩展”默认模板的样式规则。
问题:如何指定我的custom-theme.css是基于marp默认模板定义的?

提前感谢您的支持。

t2a7ltrp

t2a7ltrp1#

如果其他用户遇到同样的问题,这里以示例的形式陈述了问题的解决方案-由Yuki Hattori(marp工具集的主要开发人员)提供:
网址:Markdown.md

---
theme: custom-theme
---

# Hello, world!
/* custom-theme.css */
/* @theme custom-theme */

@import 'default';

section {
  /* Override default background */
  background: #def;
}

Marp-cli:

marp --engine ./engine.js --bespoke.progress --watch --theme-set custom-theme.css -- mymarkdo

标签:https://github.com/marp-team/marp-cli/issues/266

aij0ehis

aij0ehis2#

VS Code中有动态主题渲染,无需CLI。

1.安装marp-team.marp-vscode扩展
1.将下面的代码片段粘贴到 .vscode/settings.json
1.相应地更改您的**.css* 路径和样式

// Please put `.vscode/settings.json` on your workspace
{
  "markdown.marp.themes": [
    "https://example.com/foo/bar/custom-theme.css",
    "./themes/your-theme.css"
  ]
}

相关问题