Markdown還能這麼玩?這款開源神器絕了!

語言: CN / TW / HK

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

SpringBoot實戰電商專案mall(50k+star)地址:https://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: 'https://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:https://github.com/macrozheng
  • Gitee:https://gitee.com/macrozheng
  • 掘金:https://juejin.cn/user/958429871749192
  • 知乎:https://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框架 | https://spring.io/projects/spring-boot | | SpringSecurity | 認證和授權框架 | https://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 | 搜尋引擎 | https://github.com/elastic/elasticsearch | | RabbitMQ | 訊息佇列 | https://www.rabbitmq.com/ | | Redis | 分散式快取 | https://redis.io/ | | MongoDB | NoSql資料庫 | https://www.mongodb.com | | LogStash | 日誌收集工具 | https://github.com/elastic/logstash | | Kibana | 日誌視覺化檢視工具 | https://github.com/elastic/kibana | | Nginx | 靜態資源伺服器 | https://www.nginx.com/ | | Docker | 應用容器引擎 | https://www.docker.com | | Jenkins | 自動化部署工具 | https://github.com/jenkinsci/jenkins | | Druid | 資料庫連線池 | https://github.com/alibaba/druid | | OSS | 物件儲存 | https://github.com/aliyun/aliyun-oss-java-sdk | | MinIO | 物件儲存 | https://github.com/minio/minio | | JWT | JWT登入支援 | https://github.com/jwtk/jjwt | | Lombok | 簡化物件封裝工具 | https://github.com/rzwitserloot/lombok | | Hutool | Java工具類庫 | https://github.com/looly/hutool | | PageHelper | MyBatis物理分頁外掛 | http://git.oschina.net/free/Mybatis_PageHelper | | Swagger-UI | 文件生成工具 | https://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也有一些不足之處,比如需要上下滾動的內容無法完全顯示,例如超出螢幕的程式碼段或者表格,大家使用的時候需要注意下。

參考資料

官方文件:https://cn.sli.dev/guide/

PPT檔案地址

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

「其他文章」