一種用markdown寫PPT的方法,再也不用費勁排版了

2021-03-06 python爬蟲人工智慧大數據
前言

本文原始碼位於:https://github.com/pzqu/tools

今天看jeremyxu 的技術點滴,發現分享了一個 markdown 寫 PPT 的插件,驚為天人,先來看看官方效果圖。

再看看 jeremyxu 寫的效果,我學完了都沒學會是怎麼寫的,直到看了他項目樣例我才算是真的學會了。

參考marp 官方文檔可以很快學會用法,但是用的時候去翻比較麻煩,我提煉了常用的語法,最後做了一個 PPT 練手,才算是學會了,現在分享出來以便以後翻閱。

marp 是個什麼?

日常工作生活中常常會用到 ppt, 但是 ppt 有時候做起來非常浪費時間,如果不用關心排版,可以專注內容自動排版豈不妙哉?

正好 markdown 就是解決排版的一種語言,有好心人自發開發了一個做 ppt 的利器,只用關注內容,簡單分隔一下,稍微改一下樣式就可以用了。

安裝和上手

下載個VSCode, 天然支持 markdown ,然後在左側的插件欄中搜索並安裝 Marp for VS Code 就可以開始了。為了獲得更好的 Markdown 編輯體驗,大家不妨再安裝一個叫做 Markdown All in One 的插件。

使用 Markdown 輸出一份最簡單的幻燈片,只需要讓編輯器知道兩點即可:它是幻燈片(不是文檔)以及它該在哪裡分頁,通過如下代碼做到:

---
marp: true
---
幻燈片1

1. asdf
2. asdf
---
幻燈片2

* asdf
* asdf

效果如下

編輯完成後,通過編輯器右上角的 Marp 圖標按鈕就可以調出 Export slide deck... 命令並導出幻燈片了。Marp 插件目前支持導出 HTML 和 PDF 格式,另外可以將首頁導出為 PNG 或 JPEG 格式的圖片。

優化樣式

當然沒有漂亮是樣式是不行的,好在可以簡單設置呈現,為此我專門做了一個 ppt

有三款主題可以選擇,可以參考themes,有的主題只能居中,我選了一個可居中也可居左的主題。

---
marp: true
theme: gaia
footer: '機智的小熊 2020-06-18'
paginate: true
style: |
section a {
font-size: 30px;
}
---

footer 代表是頁尾, header 代表頁首style 自定義全局樣式,插件所有的樣式參考官網提供的樣式首頁配置

在當前頁面頭部,用 html 中的注釋語法

<!--
_class: lead gaia
_paginate: false
-->

_class 當前頁面設置 lead gaia 樣式(居中),如果前面不加下劃線會影響所有頁面

首頁內容如下


![w:160](圖片連結)

# Marp for VS Code方法

## 一種用markdown寫ppt的vscode插件marp

這款ppt就是我用「寫」出來的,用來展示效果。

圖片設置更改長寬
![width:200px](image.jpg)
![height:300px](image.jpg)
![w:200px h:30cm](image.jpg)

圖片濾鏡(Image Filter)

基於 CSS 的 filter 屬性,Marp 可以對圖片進行一些基於模糊、亮度、對比度等的操作,如:

![blur:15px](image.png)
![brightness:0.5](image.png)
![contract:150%](image.png)

參考更多 p 圖命令

背景圖片

針對幻燈片的背景圖片, Marp 提供了簡單的方式將某張圖片設為背景,在方括號中寫入 bg 即可

![bg](background.png)

同時通過在 bg 後追加圖片的格式屬性,如 [bg fit] ,可以具體設置背景圖片的縮放方式。其中 cover 表示充滿頁面, fit 表示拉伸以適應頁面, auto 為不做縮放使用原圖片比例。

其他圖片詳細語法, 參考官網文檔調整大小、濾鏡,圖片作背景的布局、尺寸、分割

更改布局背景圖片布局
![bg](images/9BBDF9.png)
![bg](images/2EC0F9.png)
![bg](images/B95F89.png)

在其中一張圖片後加入屬性 vertical 將使圖片縱向組合。

![bg vertical](images/9BBDF9.png)
![bg](images/2EC0F9.png)
![bg](images/B95F89.png)

更新圖片與文字位置

有時候想左文右圖,或者左圖右文的布局,可以設置背景圖片的位置

參考更多背景圖片文字排版命令

假如你想加一張完整圖片做展示,而不是要上面的樣式,可以自行調整圖片大小實現

![bg right w:15cm](images/prometheuslogo.png)

如果是上下排布的長圖就不需要加bg了,直接放上去就好了。

### prometheus

此處的圖片加陰影`drop-shadow`

![width:30cm height:9cm drop-shadow](images/prometheus.png)


微信不允許添加非公眾號超連結,點擊閱讀原文,在電腦上閱讀體驗更佳

python爬蟲人工智慧大數據公眾號


相關焦點

  • 如何用Markdown輕鬆排版知乎專欄文章?
    痛點從前,寫作時的排版是件辛苦事。不論你把排版環節放在寫作中還是寫作後,總會在心裡清楚意識到,還有這麼一個繁重而無趣的工作在等著你。後來,有了Markdown,排版就變成了一件令人愉悅的事情了。你只需要用非常簡單的記號說明一些特殊位置,例如標題、列表、腳註和圖片等,然後應用不同的樣式,你寫好的文字就能自動轉化為各種漂亮的排版效果了。
  • 用R語言+ bookdown實現Markdown 撰寫學術論文並實現Latex排版
    概述R語言的bookdown包可以實現直接用markdown撰寫,並最終實現latex排版。把生成的latex代碼套用到期刊模板就可以實現latex撰寫。用Atom編輯器來寫論文,可以實時預覽和代碼補全,更加直觀和高效。
  • 高效排版,Markdown原來還能這麼用
    文字編輯早就成了我們生活中不可缺少的一部分,交課程論文要排版,列印考試資料要排版,寫篇新媒體文章更要排版。 2.使用方法簡單,便於操作 通過簡單的符號完成排版,只需要掌握住幾種符號,就能完成美觀的排版。
  • Markdown—一種高效的寫作方式
    markdown高效協作昨天的考試讓人有些些許煩躁,更一篇吧。
  • 終於下決心處理了將markdown編寫內容複製到百家號排版亂的問題
    前因:在發文章前,先是通過自己博客用markdown進行編寫;然後生成對應的HTML標籤複製到頭條或公眾號;然後,然後就某些代碼片段的排版看的心碎,自己都沒心思往下看,更別說讀者;由於其他第三方的限制,不能直接導流到博客,所以排版...
  • 如果你還不會用Markdown
    Markdown使用一、介紹考慮到周圍不少同學不太了解markdown以及從未使用過markdown,這裡對markdown進行一下介紹。我平時寫公眾號文章全部是使用markdown編寫,之後使用相應的格式轉換工具排版,比起word要方便很多(當然如果word用的很熟練的話自然是不比markdown差的,我就屬於word用得不太利索的…)markdown在平時的工作生活中有很多方便的使用場景,例如做筆記,進行項目記錄,寫報告等等。
  • 推薦一款好用的微信號排版編輯工具:Markdown Nice
    請閱讀下方文本熟悉工具使用方法,本文可直接拷貝到微信中預覽。1 Markdown Nice 簡介可使用格式->圖片上傳本地圖片,網站目前支持「圖殼」圖床,失敗率低,但是只可保存一天用於排版註:僅支持 https 的圖片,圖片粘貼到微信、知乎或掘金時會自動上傳其伺服器,不必擔心使用上述圖床會導致圖片丟失。
  • 「Markdown入門」效率神器將文字排版合二為一
    而使用Markdown,就像它的名字一樣,在你寫的文字上做好Mark(標記),到時候直接就能轉換成你標記好的文字格式。也就是文字排版一氣呵成。用了Markdown,文字創作和排版合二為一,我們不再需要寫兩段文字,就要像在word等富文本編輯器裡一樣,還要反覆去調整標題、加粗、斜體、分割、引用等等,繪製表格也不用去調用表格工具。所有的排版都在編輯文字時順便完成,後期只需微調即可。花更多的時間在文字內容上,而不是為排版所累。
  • 還在用 Word 做筆記?Markdown 開啟你更高效工作的第一步!
    何為 Markdown❝Markdown 是一種「輕量級」標記語言,它允許人們使用易讀易寫的「純文本格式」編寫文檔,然後轉換成有效的 HTML 文檔。❞❝由於 Markdown 的輕量化、易讀易寫特性,並且對於圖片,圖表、數學式都有支持,目前許多網站都廣泛使用 Markdown 來撰寫幫助文檔或是用於論壇上發表消息。
  • 5分鐘掌握一項寫作技能,小白也能懂的簡明markdown教程
    Markdown是一種可以使用普通文本編輯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本內容具有一定的格式。markdown是為那些需要經常碼字或者進行文字排版的、對碼字手速和排版順暢度有要求的人群設計的,他們希望用鍵盤把文字內容打出來後就已經排版好了,最好從頭到尾都不要使用滑鼠。
  • Markdown 新手入門語法
    你可以認為Markdown是一種排版語法,提供了一些特殊的符號來替換成對應的格式,我們在word中點擊滑鼠來達到加粗、傾斜、增大字體的目的,在Markdown中被相應的特殊符號替代。Markdown用於解放滑鼠,僅僅使用鍵盤就能排版出非常漂亮的文字、博客等(比如本文就是用Markdown編寫的)。
  • 如何用Markdown寫論文?
    有的部分,學生會很快改完反饋給我。如果方法不當,會把寶貴的時間和注意力耗散掉,勞而無功。Word編輯器用來寫學術論文,可能真的並不是最優方案。但是沒辦法,國內學術界,尤其是人文社科領域,目前投稿模板還主要是Word的。好消息是,即便是形成Word文稿,效率也是可挖掘的。
  • 排版的事情交給LaTeX就好,讓你專注於寫作(附安裝包)
    LaTex這個神器,你即便是自己可能沒用過,但別人用它排版出來的論文,你肯定經常可見。
  • 推薦幾款好用的markdown編輯器
    Markdown編輯器使用一套格式標記語言來對文檔內容進行排版和格式顯示。而Markdown的標記很少,常用的也就十個左右,它是一種非常輕量的標記語言。Markdown編輯器深受技術人員的喜愛,Markdown可以用來編寫說明文檔,用它寫的文檔很多技術平臺都能通用;Markdown可以用來寫技術博客,可以使說明部分和代碼都非常清晰易讀;Markdown
  • 一鍵生成 PPT 的辦公神器,寫文案再也不用為配圖煩惱了
    一鍵生成 PPT 的辦公神器,寫文案再也不用為配圖煩惱了 「Mind 周榜」是愛範兒旗下的創業者社區 MindStore.io 推出的線上榜單評選欄目
  • LaTeX 搞定學術論文排版王者 (上)
    雖然編輯起來較為麻煩,但是最終成品相對於word排版來說,的確整潔規範太多。  對於致力於「研究學術」的同學,latex是一項必需的技能,尤其對於理工科同學來說。  對於文科同學,進一步學術研究也需要接觸latex,但是也推薦markdown,畢竟更輕量更簡單易學。markdown教程見歷史記錄,或在小菜單自查。  這系列文章整理了我自己學習latex的一些心得,希望幫助大家快速上手latex。
  • ppt排版雜亂怎麼辦?善用對齊工具,讓版面更整齊,畫面更美觀
    對齊工具是ppt排版非常常用的輔助工具,包括「標尺」「網格線」「參考線」,它能使ppt的排版更整齊、更有條理,也更美觀。我們做PPT的目的是直觀有效的傳遞我們的信息,如果ppt做得排版雜亂,沒有條理,就不能聚焦觀眾的目光,甚至起到相反的效果。善用對齊工具,能很好的避免排版錯亂這一問題。文字的排版很簡單,有現成的「左對齊」「右對齊」等工具,然而文本框、圖片、表格等對象的排版就不得不依靠對齊工具,對齊工具可在視圖裡面尋找。
  • 【關於PPT】多圖片排版小技巧!
    我是沐晨 多張圖片的排版,是經常會用到的!產品展示、團隊介紹、活動照片等等。都是需要用到多圖片排版的! 面對許多張圖片的時候怎麼去排版呢? 一般我們的操作都是,將圖片導入到PPT當中進行裁剪,然後擺放整齊就好了!
  • 怎樣把ppt轉換成word竟如此簡單
    不說那些非常難的方法,就是直接複製粘貼也是有可能的,將ppt中的內容直接粘貼到word文檔中,只要在排版上下點功夫,也是可以實現ppt轉換成word的。不過大家現在不用那麼麻煩,因為還有另外一種更簡單的方法可以把ppt轉換成word。到底是什麼樣的方法呢,這麼神秘!迫不及待想知道的小夥伴,有木有?好啦!不和大家兜圈子了,下面就來教大家怎樣把ppt轉換成word!
  • 在PPT中有很多張照片怎樣排版才會好看呢?
    橙漫Nicole:阿湯哥你好,請問在ppt中放很多照片怎樣排才好看呢?公司的活動照片很多,上頭給我整理的ppt就有二頁ppt排了超過十張的活動照片,我看怎麼改都難看死板,頁數多了又累贅,經理的意思是多點照片突出公司活動多,我該怎麼改?「在PPT中很多張照片怎樣排版才會好看呢?」