CFLMY-PPT自动生成记录文档001

呆呆的猪胖胖 Lv4
  2025-04-03 16:00 2025-04-03 16:00 Created   2025-05-13 15:34:47 2025-05-13 15:34:47 Updated    

前言

作者曾经听人说过这么一句话，累死累活不如做PPT的，这话虽然不雅，但是非常有道理，因此作者经常非常喜欢做出漂亮的PPT内容。

我曾经自己配置过一些markodwn转为网页PPT的开源内容，但是没有我想像中的好用。
不过也正是在这样的情况下，我接触到了WebSilides,这确实是个非常好的软件，但是是用html写的，用起来不算很方便，刚好markdown可以自动转化为html,既然如此，为什么不直接做一个自动转化的程序呢？

出于这样的目的，作者使用markdown-it做出了尝试，效果不错，以下是一个演示站点。
CFLMY-生成至美PPT

这里算是第0.0.1版。

配置环境

环境配置还是比较简单的，只需要配置nodejs,npm,markdown-it,webslides的依赖即可。

安装nodejs和npm

这里采用了之前的scoop配置的方式，详情见：Scoop环境配置记录

1
scoop install nodejs

等待下载完成即可。

安装markdown-it

使用npm安装即可：

1
npm install markdown-it

配置Webslides

直接访问如下网站，下载压缩包即可：
webslides演示网站

配置使用

在将Webslides下载解压之后，我们就可以创建一个属于自己的配置内容，比如作者就是建立了一个名为main.js的文件，并进行了下列配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
const fs = require('fs');
const MarkdownIt = require('markdown-it');

const md = new MarkdownIt({
  html: true
});
// 读取头部和尾部文件
const headerFilePath = 'decorate/header.html'; // 头部文件路径
const footerFilePath = 'decorate/footer.html'; // 尾部文件路径
const markdownFilePath = 'index.md'; // Markdown 文件路径

// 读取头部和尾部内容
const headerContent = fs.readFileSync(headerFilePath, 'utf-8');
const footerContent = fs.readFileSync(footerFilePath, 'utf-8');

// 读取 Markdown 文件
const markdownContent = fs.readFileSync(markdownFilePath, 'utf-8');

//更改定义自己的全新规则
//Error
//将标题进行更改
//新增规则，仅当标题为1级的时候，开辟新页
md.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
  const level = tokens[idx].tag.slice(1); // 获取标题级别（h1, h2, h3...）
  if (level == 1)
  {
    return '\n <section> \n <h1>'
  }
  return self.renderToken(tokens, idx, options);// 更改标题的样式或添加自定义属性
};
// 自定义分割线的渲染规则
md.renderer.rules.hr = function () {
  return ' <hr> \n </div> \n </section> \n'; // 自定义分割线样式
};

// 重写图片处理规则
md.renderer.rules.image = function (tokens, idx, options, env, self) {
  const token = tokens[idx];
  const alt = token.content; // 获取alt文本
  const src = token.attrs[token.attrIndex('src')][1]; // 获取src属性

  // 检查 alt 文本是否为 'background'
  if (alt === 'BackGround') {
      // 自定义处理逻辑，例如添加样式类
      //return `<div style="background-image: url('${src}'); height: 300px;"></div>`;
      if(src === '')
      {
        return `<span class="background" style="background-image:url('Assert/cflmy-back.png')"></span> \n <div class="wrap">`
      }
      return `<span class="background" style="background-image:url('${src}')"></span> \n <div class="wrap">`
  }
  else if(alt === 'BackGround-aligncenter'){
    if(src === '')
      {
        return `<span class="background" style="background-image:url('Assert/cflmy-back.png')"></span> \n <div class="wrap">`
      }
    return `<span class="background" style="background-image:url('${src}')"></span> \n <div class="wrap aligncenter">`
  }

  // 默认行为
  return self.renderToken(tokens, idx, options);
};

// 自定义有序列表的渲染规则
// 自定义有序列表的渲染规则
md.renderer.rules.ordered_list_open = function (tokens, idx, options, env, self) {
  // 在有序列表前添加内容
  return `<div class="bg-white shadow">
              <ul class="flexblock reasons">`; // 可以自定义前置内容
};

md.renderer.rules.ordered_list_close = function (tokens, idx, options, env, self) {
  // 在有序列表后添加内容
  return `</ul>
            </div>`; // 可以自定义后置内容
};

// 自定义无序列表的渲染规则，这里暂时先和无序列表保持一致
md.renderer.rules.bullet_list_open = function() {
  // 在有序列表前添加内容
  return `<ul class="flexblock features">`; // 可以自定义前置内容
};

// 自定义无序列表的渲染规则
md.renderer.rules.bullet_list_close = function() {
  // 在有序列表后添加内容
  return `</ul>`; // 可以自定义后置内容
};

// 自定义代码块的渲染规则
md.renderer.rules.fenced_code_open = function(tokens, idx, options, env, self) {
  // 在代码块前添加内容
  return `<div class="column">
                <pre>`;
};

md.renderer.rules.fenced_code_close = function(tokens, idx, options, env, self) {
  // 在代码块后添加内容
  return `</pre>
              </div>`;
};


const htmlContent = md.render(markdownContent);

// 生成完整的 HTML
const fullHtml = headerContent + htmlContent + footerContent;

// 写入 HTML 文件
const outputFilePath = 'index.html'; // 你的输出 HTML 文件路径
fs.writeFileSync(outputFilePath, fullHtml, 'utf-8');

console.log(`HTML 文件已生成: ${outputFilePath}`);

暂时先支持这么多内容，接下来只需要在命令行输入：

1
node main.js

就会自动读取index.md的内容，并自动输出index.html

配置效果

上述配置文件实现了效果为

  1. 读取index.md内容，并生成index.html文件
  2. 识别
    1
    2
    3
    #

    ---
    并生成新的一页sildes
  3. 识别
    1
    2
    3
    [BackGround]()
    <!--设置居中-->
    [BackGround-aligncenter]()
    如果后续为空，则插入默认背景
  4. 识别有序列表和无序列表
  5. 识别代码块

vercel配置

这个博客本身就是在vercel上建立的，自然的刚刚建立的内容也可以配置到vercel上，只需要将一些设置更改一下就好，还是比较简单的，因此不再赘述。

后记

生成漂亮的PPT确实很有吸引力，目前的很多高阶配置都没有完成，写下这一篇博客，既是记录也是对后续不断完成高阶配置的目标设立。

同系列

CFLMY-PPT自动生成记录文档001
CFLMY-PPT自动生成记录文档002
CFLMY-PPT自动生成记录文档003
CFLMY-PPT自动生成记录文档003

  • Title: CFLMY-PPT自动生成记录文档001
  • Author: 呆呆的猪胖胖
  • Created at : 2025-04-03 16:00:00
  • Updated at : 2025-05-13 15:34:47
  • Link: https://blog.cflmy.cn/2025/04/03/CFLMY/PPT/PPT001/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
CFLMY-PPT自动生成记录文档001
  1. 前言
  2. 配置环境
    1. 安装nodejs和npm
    2. 安装markdown-it
    3. 配置Webslides
  3. 配置使用
  4. 配置效果
  5. vercel配置
  6. 后记
    1. 同系列