整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
譯自： https://opensource.com/article/18/8/markdown-html-publishing
作者： Peter Cheer
譯者： geekpi
用這個(gè)有用工具從 Markdown 文件創(chuàng)建一個(gè)基礎(chǔ)的網(wǎng)站。
有很多理由喜歡 Markdown，這是一門簡(jiǎn)單的語言，有易于學(xué)習(xí)的語法，它可以與任何文本編輯器一起使用。使用像 Pandoc 這樣的工具，你可以將 Markdown 文本轉(zhuǎn)換為 各種流行格式 ，包括 HTML。你還可以在 Web 服務(wù)器中自動(dòng)執(zhí)行轉(zhuǎn)換過程。由 TimoD?rr 創(chuàng)建的名為 MDwiki 的 HTML5 和 JavaScript 應(yīng)用可以將一堆 Markdown 文件在瀏覽器請(qǐng)求它們時(shí)轉(zhuǎn)換為網(wǎng)站。MDwiki 網(wǎng)站包含一個(gè)操作指南和其他信息可幫助你入門：
Mdwiki 網(wǎng)站的樣子。
在 Web 服務(wù)器內(nèi)部，基本的 MDwiki 站點(diǎn)如下所示：
該站點(diǎn)的 web 服務(wù)器文件夾的樣子
我將此項(xiàng)目的 MDwiki HTML 文件重命名為 START.HTML。還有一個(gè)處理導(dǎo)航的 Markdown 文件和一個(gè) JSON 文件來保存一些配置設(shè)置。其他的都是網(wǎng)站內(nèi)容。
雖然整個(gè)網(wǎng)站設(shè)計(jì)被 MDwiki 固定了，但內(nèi)容、樣式和頁(yè)面數(shù)量卻沒有。你可以在 MDwiki 站點(diǎn) 查看由 MDwiki 生成的一系列不同站點(diǎn)。公平地說，MDwiki 網(wǎng)站缺乏網(wǎng)頁(yè)設(shè)計(jì)師可以實(shí)現(xiàn)的視覺吸引力 —— 但它們是功能性的，用戶應(yīng)該平衡其簡(jiǎn)單的外觀與創(chuàng)建和編輯它們的速度和簡(jiǎn)易性。
Markdown 有不同的風(fēng)格，可以針對(duì)不同的特定目的擴(kuò)展穩(wěn)定的核心功能。MDwiki 使用 GitHub 風(fēng)格 Markdown ，它為流行的編程語言添加了格式化代碼塊和語法高亮等功能，使其非常適合生成程序文檔和教程。
MDwiki 還支持 “gimmick”，它增加了如嵌入 YouTube 視頻和顯示數(shù)學(xué)公式等額外功能。如果在某些項(xiàng)目中需要它們，這些值得探索。我發(fā)現(xiàn) MDwiki 是創(chuàng)建技術(shù)文檔和教育資源的理想工具。我還發(fā)現(xiàn)了一些可能不會(huì)立即顯現(xiàn)出來的技巧和 hack。
當(dāng)部署在 Web 服務(wù)器中時(shí)，MDwiki 可與任何現(xiàn)代 Web 瀏覽器一起使用。但是，如果你使用 Mozilla Firefox 訪問 MDwiki，那么就不需要 Web 服務(wù)器。大多數(shù) MDwiki 用戶會(huì)選擇在 Web 服務(wù)器上部署完整的項(xiàng)目，以避免排除潛在用戶，但只需使用文本編輯器和 Firefox 即可完成開發(fā)和測(cè)試。任何現(xiàn)代瀏覽器都可以讀取加載到 Moodle 虛擬學(xué)習(xí)環(huán)境（VLE）中的完整的 MDwiki 項(xiàng)目，這在教育環(huán)境中非常有用。 （對(duì)于其他 VLE 軟件，這可能也是如此，但你應(yīng)該測(cè)試它。）
MDwiki 的默認(rèn)配色方案并非適用于所有項(xiàng)目，但你可以將其替換為從 Bootswatch.com 下載的其他主題。為此，只需在編輯器中打開 MDwiki HTML 文件，找到 extlib/css/bootstrap-3.0.0.min.css，然后插入下載的 Bootswatch 主題。還有一個(gè) MDwiki gimmick，讓用戶在瀏覽器中載入 MDwiki 后，選擇 Bootswatch 主題來替換默認(rèn)值。我經(jīng)常與有視力障礙的用戶一起工作，他們傾向于喜歡高對(duì)比度的主題，在深色背景上使用白色文字。
MDwiki 頁(yè)面使用 Bootswatch Superhero 主題
MDwiki、Markdown 文件和靜態(tài)圖像可以用于許多目的。但是，你有時(shí)可能希望包含 JavaScript 幻燈片或反饋表單。Markdown 文件可以包含 HTML 代碼，但將 Markdown 與 HTML 混合會(huì)讓人感到困惑。一種解決方案是在單獨(dú)的 HTML 文件中創(chuàng)建所需的功能，并將其顯示在帶有 iframe 標(biāo)記的 Markdown 文件中。我從 Twine Cookbook 知道了這個(gè)想法，它是 Twine 交互式小說引擎的支持站點(diǎn)。Twine Cookbook 實(shí)際上并沒有使用 MDwiki，但結(jié)合 Markdown 和 iframe 標(biāo)簽開辟了廣泛的創(chuàng)作可能性。
這是一個(gè)例子：
此 HTML 將顯示由 Markdown 文件中的 Twine 交互式小說引擎創(chuàng)建的 HTML 頁(yè)面。
<iframe height="400" src="sugarcube_dungeonmoving_example.html" width="90%"></iframe>
MDwiki 生成的站點(diǎn)結(jié)果如下所示：
簡(jiǎn)而言之，MDwiki 是一個(gè)出色的小應(yīng)用，可以很好地實(shí)現(xiàn)其目的。
via: https://opensource.com/article/18/8/markdown-html-publishing
作者： Peter Cheer 選題： lujun9972 譯者： geekpi 校對(duì)： wxy
本文由 LCTT 原創(chuàng)編譯， Linux中國(guó) 榮譽(yù)推出
和這篇文章一樣，我就是用Markdown寫的。相信各位平時(shí)也就用Markdown寫寫文檔，做做筆記，轉(zhuǎn)成XHtml、Html等，今天教大伙一招騷操作：用Markdown寫PPT。
絕大多數(shù)朋友做 PPT都是用的 PowerPoint 或者 KeyNote 吧？功能是比較強(qiáng)大，但你有沒有遇到過這樣的痛點(diǎn)：
如果你遇到這些痛點(diǎn)，那請(qǐng)你一定要看下去。如果你沒有遇到，那也請(qǐng)你看下去吧。
好，說回正題，我列舉了那么多痛點(diǎn)，那這些痛點(diǎn)咋解決呢？
能！甚至解決方案更加輕量級(jí)，那就是用 Markdown 來做 PPT！
你試過用 Markdown 寫 PPT 嗎？沒有吧，試試吧，試過之后你就發(fā)現(xiàn)上面的功能簡(jiǎn)直易如反掌。
具體怎么實(shí)現(xiàn)呢？
接下來，就有請(qǐng)今天的主角登場(chǎng)了！它就是——Slidev。
簡(jiǎn)而言之，Slidev 就是可以讓我們用 Markdown 寫 PPT 的工具庫(kù)，基于 Node.js、Vue.js 開發(fā)。
利用它我們可以簡(jiǎn)單地把 Markdown 轉(zhuǎn)化成 PPT，而且它可以支持各種好看的主題、代碼高亮、公式、流程圖、自定義的網(wǎng)頁(yè)交互組件，還可以方便地導(dǎo)出成 pdf 或者直接部署成一個(gè)網(wǎng)頁(yè)使用。
下面我們就來了解下它的基本使用啦。
首先我們需要先安裝好 Node.js，推薦 14.x 及以上版本，安裝方法見這里
接著，我們就可以使用 npm 這個(gè)命令了。
然后我們可以初始化一個(gè)倉(cāng)庫(kù)，運(yùn)行命令如下：
npm init slidev@latest
這個(gè)命令就是初始化一個(gè) Slidev 的倉(cāng)庫(kù)，運(yùn)行之后它會(huì)讓我們輸入和選擇一些選項(xiàng)，如圖所示：
比如上圖就是先輸入項(xiàng)目文件夾的名稱，比如這里我取名叫做 slidevtest。
總之一些選項(xiàng)完成之后，Slidev 會(huì)在本地 3000 端口上啟動(dòng)，如圖所示：
接著，我們就可以打開瀏覽器 http://localhost:3000 來查看一個(gè) HelloWorld 版本的 PPT 了，如圖所示：
我們可以點(diǎn)擊空格進(jìn)行翻頁(yè)，第二頁(yè)展示了一張常規(guī)的 PPT 的樣式，包括標(biāo)題、正文、列表等，如圖所示：
那這一頁(yè)的 Markdown 是什么樣的呢？其實(shí)就是非常常規(guī)的 Markdown 文章的寫法，內(nèi)容如下：
# What is Slidev?
Slidev is a slides maker and presenter designed for developers, consist of the following features
- **Text-based** - focus on the content with Markdown, and then style them later
- **Themable** - theme can be shared and used with npm packages
- ? **Developer Friendly** - code highlighting, live coding with autocompletion
- **Interactive** - embedding Vue components to enhance your expressions
- **Recording** - built-in recording and camera view
- **Portable** - export into PDF, PNGs, or even a hostable SPA
- **Hackable** - anything possible on a webpage
<br>
<br>
Read more about [Why Slidev?](https://sli.dev/guide/why)
是不是？我們只需要用同樣格式的 Markdown 語法就可以輕松將其轉(zhuǎn)化為 PPT 了。
再下一頁(yè)介紹了各種快捷鍵的操作，這個(gè)就很常規(guī)了，比如點(diǎn)擊空格、上下左右鍵來進(jìn)行頁(yè)面切換，如圖所示：
更多快捷鍵的操作可以看這里，一些簡(jiǎn)單的快捷鍵列舉如下：
接下來就是代碼環(huán)節(jié)了，因?yàn)?Markdown 對(duì)代碼編寫非常友好，所以展示自然也不是問題了，比如代碼高亮、代碼對(duì)齊等都是常規(guī)操作，如圖所示：
那左邊的代碼定義就直接這么寫就行了：
# Code
Use code snippets and get the highlighting directly![^1]
```ts {all|2|1-6|9|all}
interface User {
id: number
firstName: string
lastName: string
role: string
}
function updateUser(id: number, update: User) {
const user = getUser(id)
const newUser = {...user, ...update}
saveUser(id, newUser)
}
```
由于是 Markdown，所以我們可以指定是什么語言，比如 TypeScript、Python 等等。
接下來就是非常酷炫的環(huán)節(jié)了，我們還可以自定義一些網(wǎng)頁(yè)組件，然后展示出來。
比如我們看下面的一張圖。左邊就呈現(xiàn)了一個(gè)數(shù)字計(jì)數(shù)器，點(diǎn)擊左側(cè)數(shù)字就會(huì)減 1，點(diǎn)擊右側(cè)數(shù)字就會(huì)加 1；另外圖的右側(cè)還嵌入了一個(gè)組件，這里顯示了一個(gè)推特的消息，通過一個(gè)卡片的形式呈現(xiàn)了出來，不僅僅可以看內(nèi)容，甚至我們還可以點(diǎn)擊下方的喜歡、回復(fù)、復(fù)制等按鈕來進(jìn)行一些交互。
這些功能在網(wǎng)頁(yè)里面并不稀奇，但是如果能做到 PPT 里面，那感覺就挺酷的。
那這一頁(yè)怎么做到的呢？這個(gè)其實(shí)是引入了一些基于 Vue.js 的組件，本節(jié)對(duì)應(yīng)的 Markdown 代碼如下：
# Components
<div grid="~ cols-2 gap-4">
<div>
You can use Vue components directly inside your slides.
We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
```html
<Counter :count="10" />
```
<!-- ./components/Counter.vue -->
<Counter :count="10" m="t-4" />
Check out [the guides](https://sli.dev/builtin/components.html) for more.
</div>
<div>
```html
<Tweet id="1390115482657726468" />
```
<Tweet id="1390115482657726468" scale="0.65" />
</div>
</div>
這里我們可以看到，這里引入了 Counter、Tweet 組件，而這個(gè) Counter 就是 Vue.js 的組件，代碼如下：
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
count: {
default: 0,
},
})
const counter = ref(props.count)
</script>
<template>
<div flex="~" w="min" border="~ gray-400 opacity-50 rounded-md">
<button
border="r gray-400 opacity-50"
p="2"
font="mono"
outline="!none"
hover:bg="gray-400 opacity-20"
@click="counter -= 1"
>
-
</button>
<span m="auto" p="2">{{ counter }}</span>
<button
border="l gray-400 opacity-50"
p="2"
font="mono"
outline="!none"
hover:bg="gray-400 opacity-20"
@click="counter += 1"
>
+
</button>
</div>
</template>
這就是一個(gè)標(biāo)準(zhǔn)的基于 Vue.js 3.x 的組件，都是標(biāo)準(zhǔn)的 Vue.js 語法，所以如果我們要添加想要的組件，直接自己寫就行了，什么都能實(shí)現(xiàn)，只要網(wǎng)頁(yè)能支持的，統(tǒng)統(tǒng)都能寫！
當(dāng)然，一些主題定制也是非常方便的，我們可以在 Markdown 文件直接更改一些配置就好了，比如就把 theme 換個(gè)名字，整個(gè)主題樣式就變了，看如下的對(duì)比圖：
上面就是一些內(nèi)置主題，當(dāng)然我們也可以去官方文檔查看一些別人已經(jīng)寫好的主題，見：。
另外我們自己寫主題也是可以的，所有的主題樣式都可以通過 CSS 等配置好，想要什么就可以有什么，見：。
接下來就是一個(gè)非常強(qiáng)大實(shí)用的功能，公式和圖表，支持 Latex、流程圖，如圖所示：
比如上面的 Latex 的源代碼就是這樣的：
Inline $\sqrt{3x-1}+(1+x)^2$
Block
$$
\begin{array}{c}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{array}
$$
其語法也是和 Latex 一樣的。
其背后是怎么實(shí)現(xiàn)的呢？其實(shí)是因?yàn)?Slidev 默認(rèn)集成了 Katex 這個(gè)庫(kù)，見：https://katex.org/，有了 Katex 的加持，所有公式的顯示都不是事。
有的朋友就好奇了，既然是用 Markdown 寫 PPT，那么每一頁(yè)之間是怎么分割的呢？
其實(shí)很簡(jiǎn)單，最常規(guī)的，用三條橫線分割就好了，比如：
---
layout: cover
---
# 第 1 頁(yè)
This is the cover page.
---
# 第 2 頁(yè)
The second page
當(dāng)然，除了使用三橫線，我們還可以使用更豐富的定義模式，可以給每一頁(yè)制定一些具體信息，就是使用兩層三橫線。
比如這樣：
---
theme: seriph
layout: cover
background: 'https://source.unsplash.com/1600x900/?nature,water'
---
上面這樣的配置可以替代三橫線，是另一種可以用作頁(yè)面分隔的寫法，借助這種寫法我們可以定義更多頁(yè)面的具體信息。
當(dāng)然我們肯定也想給 PPT 添加備注，這個(gè)也非常簡(jiǎn)單，通過注釋的形式寫到 Markdown 源文件就好了：
---
layout: cover
---
# 第 1 頁(yè)
This is the cover page.
<!-- 這是一條備注 -->
這里可以看到其實(shí)就是用了注釋的特定語法。
當(dāng)然還有很多酷炫的功能，比如說，我們?cè)谥v PPT 的時(shí)候，可能想同時(shí)自己也出鏡，Slidev 也可以支持。
因?yàn)殚_的是網(wǎng)頁(yè)，而網(wǎng)頁(yè)又有捕捉攝像頭的功能，所以最終效果可以是這樣子：
是的沒錯(cuò)！右下角就是演講者的個(gè)人頭像，它被嵌入到了 PPT 中！是不是非常酷！
當(dāng)然，Slidev 還支持演講錄制功能，因?yàn)樗澈蠹闪?WebRTC 和 RecordRTC 的 API，一些錄制配置如下所示：
所以，演講過程的錄制完全不是問題。
具體的操作可以查看：
當(dāng)然用 Slidev 寫的 PPT 還可以支持部署，因?yàn)檫@畢竟就是一個(gè)網(wǎng)頁(yè)。
而且部署非常簡(jiǎn)單和輕量級(jí)，因?yàn)檫@就是一些純靜態(tài)的 HTML、JavaScript 文件，我們可以輕松把它部署到 GitHub Pages、Netlify 等站點(diǎn)上。
試想這么一個(gè)場(chǎng)景：別人在演講之前還在各種拷貝 PPT，而你打開了一個(gè)瀏覽器直接輸入了一個(gè)網(wǎng)址，PPT 就出來了，眾人驚嘆，就問你裝不裝逼？
具體的部署操作可以查看：
讓我們看幾個(gè)別人已經(jīng)部署好的 PPT，直接網(wǎng)頁(yè)打開就行了：
就是這么簡(jiǎn)單方便。
什么？你想實(shí)現(xiàn)版本控制，那再簡(jiǎn)單不過了。
Markdown 嘛，配合下專業(yè)版本管理工具 Git，版本控制再也不是難題。
以上就是對(duì) Slidev 的簡(jiǎn)單介紹，確實(shí)不得不說有些功能真的非常實(shí)用，而且我本身特別喜歡 Markdown 和網(wǎng)頁(yè)開發(fā)，所以這個(gè)簡(jiǎn)直對(duì)我來說太方便了。
本文轉(zhuǎn)自https://www.cnblogs.com/BlueSocks/p/16056714.html
者：前端小智 來源：大遷世界
.md文件是markdown的一種標(biāo)記語言，和html比較起來，更簡(jiǎn)單快捷，主要體現(xiàn)在：標(biāo)記符的數(shù)量和書寫上。
方式一：使用i5ting_toc插件
需要先安裝npm(安裝node.js后會(huì)自帶npm)，然后才能安裝i5ting插件：
npm install i5ting_toc -g
執(zhí)行命令行生成html文件，在輸入前要進(jìn)入到對(duì)應(yīng)根目錄下：
i5ting_toc -f **.md
需要注意的是：寫md文檔的特殊符號(hào)時(shí)記得添加空格。小技巧：如何快速在當(dāng)前目錄打開cmd?選擇當(dāng)前目錄，按住shift，然后鼠標(biāo)右鍵在此處打開命令窗口(在此處打開powerShell窗口)。
方式二：使用gitbook
同樣先需要安裝node，然后運(yùn)行：
npm i gitbook gitbook-cli -g
生成md文件,這個(gè)命令會(huì)生成相應(yīng)的md的文件，然后在相應(yīng)的文件里寫你的內(nèi)容即可：
gitbook init
md轉(zhuǎn)html,生成一個(gè)_doc目錄，打開就可以看到你html文件了。
gitbook build
方式三：利用前端代碼
實(shí)現(xiàn)原理是采用node.js搭建服務(wù)器，讀取md文件轉(zhuǎn)化為html片斷。瀏覽器發(fā)送ajax請(qǐng)求獲取片段后再渲染生成html網(wǎng)頁(yè)。
node代碼：
var express = require('express');
var http = require('http');
var fs = require('fs');
var bodyParser = require('body-parser');
var marked = require('marked'); // 將md轉(zhuǎn)化為html的js包
var app = express();
app.use(express.static('src')); //加載靜態(tài)文件
var urlencodedParser = bodyParser.urlencoded({ extended: false });
app.get('/getMdFile',urlencodedParser, function(req, res) {
var data = fs.readFileSync('src/test.md', 'utf-8'); //讀取本地的md文件
res.end(JSON.stringify({
body : marked(data)
}));
} );
//啟動(dòng)端口監(jiān)聽
var server = app.listen(8088, function () {
var host = server.address().address;
var port = server.address().port;
console.log("應(yīng)用實(shí)例，訪問地址為 http://%s:%s", host, port)
});
前端html：
<div id="content"> <h1 class="title">md-to-HTML web app</h1> <div id="article"> </div></div><script type="text/JavaScript" src="js/jquery-1.11.3.min.js"></script><script> var article = document.getElementById('article'); $.ajax({ url: "/getMdFile", success: function(result) { console.log('數(shù)據(jù)獲取成功'); article.innerHTML = JSON.parse(result).body; }, error: function (err) { console.log(err); article.innerHTML = '<p>獲取數(shù)據(jù)失敗</p>'; } });</script>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
