标签: marp

如何在 Marp/Marpit 中创建全幻灯片大小的拉伸三列

我正在使用 marp/marpit 来创建幻灯片。我的目标是创建具有三个垂直列的幻灯片。我有一个 CSS 文件,我在 HTML 页面和 marp 中使用它。在网络浏览器中,HTML 页面会扩展到整个页面。但在 PDF 查看器(由 marp 生成的文件)中,幻灯片有一些从左/右上/下的边框。

我正在使用的文件:

页面.html

<!DOCTYPE html>
<html>

<!-- page.html -->

<head>
    <!-- <link rel="stylesheet" href="css.css"> -->
    <link rel="stylesheet" href="custom-theme.css">
</head>

<body>
    <div class="container">
        <!-- <div class="toppane">Test Page</div> -->
        <div class="leftpane">
            <h1>Left column</h1>
        </div>
        <div class="middlepane">
            <h1>Middle column</h1>
        </div>
        <div class="rightpane">
            <h1>Right column</h1>
        </div>
    </div>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

自定义主题.css

/* custom-theme.css */
/* @theme custom-theme */

@import 'default';

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  
  .container { …
Run Code Online (Sandbox Code Playgroud)

html css marpit marp

6
推荐指数
1
解决办法
2855
查看次数

让 Marp 将某些内容水平和垂直居中

我正在使用 Marp,它是一个在 Markdown 中创建演示文稿并将其转换为 pdf 的工具。在第一张幻灯片上,我有一些内容,例如:

# <center> Working with Virtual Box </center>
<img align="right" src="images/logo.png" width="250">
Run Code Online (Sandbox Code Playgroud)

所有这些都是顶部中心对齐的。我想要的是文本居中对齐(垂直和水平),图像右下对齐。我在 Marp 文档中找不到太多相关信息。我希望有更好 css 的人知道如何提供帮助!相信我,我为此搜索了两个多小时,但我缺乏 CSS 技能,这让我一事无成。

html css markdown marp

5
推荐指数
2
解决办法
1万
查看次数

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

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

我的目标:我想将custom-theme.css文件中的 css 规则外部化,并将它们从.md,并将它们从幻灯片内容所在的文档中

问题:当使用选项调用custom-theme.cssusing marp-cli时--theme-set,我无法指定我的 css“扩展”默认模板的样式规则。

问题:如何指定 mycustom-theme.css是基于 marp 默认模板定义的?

预先感谢您的支持。

css markdown marp

3
推荐指数
1
解决办法
3586
查看次数

如何在 Marp 演示文稿中设置代码块的样式?

我想增大我的一张 Marp 幻灯片上代码块的字体。

如何设置单个代码块的样式而不影响周围的文本?

markdown slideshow marp

3
推荐指数
1
解决办法
4564
查看次数

如何在 Marp 或 Marpit 中将图像对齐到文本标题下方

我通过 VScode 使用 Marpit。这是 mi 最小工作示例:

---
marp: true
---

This should go in to the header and picture should be bellow it, but right now it is the middle of the picture

![bg contain](https://csgeekshub.com/wp-content/uploads/2020/07/C-Program-compilation-steps-and-process.jpg)

Run Code Online (Sandbox Code Playgroud)

这段代码的问题是它生成的幻灯片中文本和图像居中对齐,如下图所示:

在此输入图像描述

我希望将文本作为标题而不是交叉图像。

我怎样才能实现这个目标?

html css markdown marpit marp

3
推荐指数
1
解决办法
6969
查看次数

在 Marp 中插入表

我正在使用 Marp 生成 pdf 演示文稿(markdown 语法)。对于演示文稿,我必须从 pandas 数据框中插入表格。我现在使用的技巧是通过 pandas 打印“to_markdown”并将结果复制粘贴到我的 Markdown 代码中,但我无法更改字体大小并选择放置表格的位置。Marp文档对于此类问题没有太大帮助。如何修改 Markdown 中的字体大小和表格本地化?

markdown presentation pandas marp

2
推荐指数
1
解决办法
4103
查看次数

添加 MARP 演示文稿的内部链接

我有一个基本的 MARP 演示文稿,https://github.com/marp-team/marp。我想添加链接来模拟脚注或参考文献。可以吗,导出PDF怎么样?

Some text with source. [1]
Run Code Online (Sandbox Code Playgroud)

“1”应该链接到另一张幻灯片:

1. some description
Run Code Online (Sandbox Code Playgroud)

PS 我没有足够的声誉来marp为这个问题创建标签,如 MARP 自述文件所述。

markdown marp

1
推荐指数
1
解决办法
1836
查看次数

标签 统计

marp ×7

markdown ×6

css ×4

html ×3

marpit ×2

pandas ×1

presentation ×1

slideshow ×1