Markdown還能這麼玩？這款開源神器絕了！

語言: CN / TW / HK
時間 2022-11-17 06:15:04

Markdown是一款輕量級標記語言，由於它易讀易寫的特性，很多程式設計師用它來寫專案文件。其實Markdown的功能不止於此，結合一些工具使用還可以用來做PPT，今天帶大家使用Markdown來做一個PPT，看看到底有多炫酷！

SpringBoot實戰電商專案mall（50k+star）地址：http://github.com/macrozheng/mall

Slidev簡介

Slidev是一款專門為開發者打造的簡報工具，目前在Github上已有23K+Star。通過Slidev，我們只要使用熟悉的Markdown就可以做出炫酷的PPT來，同時擁有支援HTML和Vue元件的能力，並且能夠呈現畫素級完美的佈局。

它的主要功能如下：

下面是我用Slidev製作的mall專案介紹PPT的效果圖，還是挺炫酷的大家可以看下！

安裝

在使用Slidev製作PPT之前，我們需要先安裝下它的環境。

  • 確保電腦上已經安裝了NodeJS 14以上版本，然後使用如下命令初始化專案：

bash npm init slidev

  • 安裝過程中我們需要輸入專案名稱mall-intro-sldev，安裝完成後會自行啟動；

  • 如果專案被關閉了，也可以使用如下命令執行；

bash npm run dev

  • 當然你也可以安裝Slidev的CLI工具後使用slidev命令來執行；

bash npm i -g @slidev/cli

  • 安裝完成後專案預設執行在3030埠，訪問地址：http://localhost:3030/

  • 由於是使用Markdown來編寫PPT，你可以使用任意的Markdown編輯器，比如Typora或者MarkText，這裡使用的是VSCode，因為它有Slidev專屬的外掛可以使用；

  • VSCode的使用這裡就不再贅述了，具體可以參考之前的文章VSCode使用教程

  • 安裝完成後直接用VSCode開啟Slidev初始化好的資料夾即可，開啟預設的PPT檔案slides.md，然後開啟外掛檢視即可開始編輯。

使用

環境搭建完畢，下面我們就可以開始製作PPT了，這裡以mall專案的介紹PPT為例。

使用主題

  • 在使用Slidev之前，我們最好選擇一個炫酷的主題，Slidev提供的主題還是挺多的，選擇一個自己喜歡的就好；

  • 這裡我們使用Penguin這個主題，使用如下命令安裝主題；

bash npm i slidev-theme-penguin

  • 如果遇到如下提示，需要安裝sass；

```bash

提示資訊：Preprocessor dependency "sass" not found. Did you install it?

npm i sass ```

  • 安裝完成後，我們在Markdown文件頂部修改theme屬性即可使用主題。

```markdown

theme: penguin

```

使用佈局

通過佈局我們可以很好地控制PPT中的內容，不同的主題也擁有不同的佈局，這裡以penguin主題為例。

  • 我們先來編寫一個PPT的封面頁，使用的是intro佈局，---符號之間的是頁面配置，---之後的是PPT中的內容；

```markdown

配置主題

theme: penguin

幻燈片的配色方案，可以使用 'auto'，'light' 或者 'dark'

colorSchema: 'auto' layout: intro

程式碼語法高亮設定，可以使用 'prism' 或 'shiki' 方案

highlighter: shiki

用於主題定製

themeConfig:

配置封面頁左上角Logo

logoHeader: '/logo_round.png'

配置全域性左下角Logo

eventLogo: '/github.png'

配置全域性左下角Logo跳轉路徑

eventUrl: 'http://github.com/macrozheng'
css: unocss

Mall開源電商專案

mall專案致力於打造一個完整的電商系統，採用現階段流行技術實現。

快速開始

```

  • 由於我們將新的PPT內容放到了mall-slidev.md檔案中，因此啟動時需要使用slidev mall-slidev.md命令，展示效果如下；

  • 我們再來編寫一個presenter佈局，可用於展示PPT作者的資訊；

```markdown

layout: presenter

配置作者頭像

presenterImage: '/logo.png'

macrozheng的個人介紹

SpringBoot實戰電商專案mall（50K+Star）的作者。

  • Github：http://github.com/macrozheng
  • Gitee：http://gitee.com/macrozheng
  • 掘金：http://juejin.cn/user/958429871749192

  • 知乎：http://www.zhihu.com/people/macrozheng ```

  • 演示者佈局展示如下；

  • 如果沒有特殊需求的話，可以使用預設佈局；

```markdown layout: default

專案介紹

mall專案是一套電商系統，包括前臺商城系統及後臺管理系統，基於SpringBoot+MyBatis實現，採用Docker容器化部署。前臺商城系統包含首頁門戶、商品推薦、商品搜尋、商品展示、購物車、訂單流程、會員中心、客戶服務、幫助中心等模組。後臺管理系統包含商品管理、訂單管理、會員管理、促銷管理、運營管理、內容管理、統計報表、財務管理、許可權管理、設定等模組。

  • 如果我們想在PPT中同時展示文字和圖片，可以使用text-image佈局，通過reverse屬性我們可以控制圖片在左還是在右；

```markdown

layout: text-image media: 'http://img.macrozheng.com/mall/project/mall_admin_show.png' reverse: false

專案演示

後臺管理系統

mall-admin-web是一個電商後臺管理系統的前端專案，基於Vue+Element實現。 主要包括商品管理、訂單管理、會員管理、促銷管理、運營管理、內容管理、統計報表、財務管理、許可權管理、設定等功能。

  • 對於預設佈局我們如果不需要配置的話，可以簡寫成功---；

```markdown

技術選型-後端

| 技術 | 說明 | 官網 | | -------------------- | ------------------- | ---------------------------------------------- | | SpringBoot | 容器+MVC框架 | http://spring.io/projects/spring-boot | | SpringSecurity | 認證和授權框架 | http://spring.io/projects/spring-security | | MyBatis | ORM框架 | http://www.mybatis.org/mybatis-3/zh/index.html | | MyBatisGenerator | 資料層程式碼生成 | http://www.mybatis.org/generator/index.html | | Elasticsearch | 搜尋引擎 | http://github.com/elastic/elasticsearch | | RabbitMQ | 訊息佇列 | http://www.rabbitmq.com/ | | Redis | 分散式快取 | http://redis.io/ | | MongoDB | NoSql資料庫 | http://www.mongodb.com | | LogStash | 日誌收集工具 | http://github.com/elastic/logstash | | Kibana | 日誌視覺化檢視工具 | http://github.com/elastic/kibana | | Nginx | 靜態資源伺服器 | http://www.nginx.com/ | | Docker | 應用容器引擎 | http://www.docker.com | | Jenkins | 自動化部署工具 | http://github.com/jenkinsci/jenkins | | Druid | 資料庫連線池 | http://github.com/alibaba/druid | | OSS | 物件儲存 | http://github.com/aliyun/aliyun-oss-java-sdk | | MinIO | 物件儲存 | http://github.com/minio/minio | | JWT | JWT登入支援 | http://github.com/jwtk/jjwt | | Lombok | 簡化物件封裝工具 | http://github.com/rzwitserloot/lombok | | Hutool | Java工具類庫 | http://github.com/looly/hutool | | PageHelper | MyBatis物理分頁外掛 | http://git.oschina.net/free/Mybatis_PageHelper | | Swagger-UI | 文件生成工具 | http://github.com/swagger-api/swagger-ui | | Hibernator-Validator | 驗證框架 | http://hibernate.org/validator | ```

  • 有時候我們需要PPT內容全部居中，可以使用new-section佈局；

```markdown

layout: new-section

系統架構

系統架構圖 ```

  • 居中佈局展示如下；

  • 如果你想將某些內容顯示在視窗中的話，還可以使用text-window佈局，使用::window::來分割在視窗中的內容；

```markdown

layout: text-window

業務架構

::window::

業務架構圖 ```

  • 文字窗口布局展示如下；

  • 如果你想實現雙列布局的話，可以使用two-cols佈局，使用::right::來分割左右列；

```markdown

layout: two-cols

```

  • 雙列布局展示如下：

演示功能

  • 如果你把滑鼠放到PPT的左下角的話，你還會發現Slidev提供了一排功能按鈕，可以實現全屏、前進、後退、錄製、線上編輯等功能；

  • 通過概覽功能，我們可以檢視所有PPT的概覽；

  • 通過切換主題功能，我們可以進行主題切換，比如切換到暗色主題；

  • 通過畫圖功能，我們可以對PPT上的重點內容進行標註；

  • 通過線上編輯功能，我們可以實現PPT內容的線上修改。

部署

  • Slidev實現靜態部署也很簡單，直接使用如下命令進行打包，可以通過--base指定訪問的子路徑，在有多個PPT專案需要部署時，使用子路徑比較好；

bash slidev build mall-slidev.md --base /mall-slidev/

  • 打包過程中輸出日誌如下，注意圖片資源最好使用檔案儲存，不要放在專案目錄下；

  • 打包完成後，所有靜態資源都會輸出到dist目錄下；

  • 然後把dist目錄放入Nginx的html目錄下，並改名為mall-slidev，訪問以下路徑即可檢視PPT。

總結

使用Markdown來製作PPT，對程式設計師來說確實很方便。試想一下當別人還在找PPT檔案時，你直接開啟一個連結就可以展示，是不是夠炫酷！不過Slidev也有一些不足之處，比如需要上下滾動的內容無法完全顯示，例如超出螢幕的程式碼段或者表格，大家使用的時候需要注意下。

參考資料

官方文件：http://cn.sli.dev/guide/

PPT檔案地址

http://github.com/macrozheng/mall-learning/tree/master/document/ppt/mall-slidev.md

「其他文章」
「」
「」