摘要：最近發現了一個新的寫的思路，仔細一想，自己仿佛積累了不少寫的思路和想法，總結一下，拋磚引玉。本文所說主要分以下三種本地外鏈文章中帶本地樓主在工作和學習中是比較喜歡寫的，拋出問題非常直觀。對于樓主來說，多數情況下是一個文件就可以搞定的。

最近發現了一個新的寫 demo 的思路，仔細一想，自己仿佛積累了不少寫 demo 的思路和想法，總結一下，拋磚引玉。

本文所說 demo 主要分以下三種：

本地 demo

外鏈 demo

文章中帶 demo

樓主在工作和學習中是比較喜歡寫 demo 的，拋出問題非常直觀。

本地寫 demo，愛咋整就可以咋整，簡單到可以只有一個 HTML 文件，復雜到引入 React / Vue 等框架類庫，視情況而定。對于樓主來說，多數情況下是一個 HTML 文件就可以搞定的。最方便的情況下，直接新建個 HTML 文件，然后起一個本地 server 即可，本地 server 可以用 Python、PHP 等起，對于前端來說，http-server 是個不錯的選擇，然后再配置個 alias，比如我在 .zshrc 中配置 alias s="http-server"，可以秒啟。如果是稍微復雜的情況，需要些許調試，那么修改后自動刷新是必須的，我寫了一個簡單的腳手架 gulp-simple 可以滿足這個需求。但是我比較懶，覺得這樣還不太方便，畢竟需要編輯器和瀏覽器兩邊切換查看效果（單屏的情況下），有時只是查看一個簡單的 css 特性，這樣搞就顯得麻煩了，我又給自己開發了兩個簡單的在線編輯器，分別是 html editor1 以及 html editor2，方便調試簡單的 html 頁面。

本地 demo 大概三個方式，總結下：

本地新建 HTML 文件，雙擊啟動或者本地啟 server

使用 gulp-simple（需要簡單調試的頁面）

使用 html editor1 或者 html editor2 在線編輯以及調試

你寫了個炫酷的頁面，希望分享給別人，如果把 HTML 文件發給別人，顯然不是一個好的想法，最簡單的方式就是將文件上傳到服務器，發送鏈接給別人，也正是接下去要說的外鏈 demo。

最方便的選擇是選擇第三方服務，類似 codepen 或者 jsfiddle，國內的 runjs 也做的不錯可以試試。（這些網站均有很多不錯的 demo，可以看看實現）

因為個人是重度 GitHub 用戶，自從知道 GitHub Pages 這玩意后，一般的外鏈 demo 都放在那了，所以 GitHub Pages 也不失為一個好的選擇。（點這里 看我的全部 demo）

說到 GitHub Pages，其實 GitHub 中的 repo 中的靜態 HTML 頁面也是可以查看效果的（歸根結底還是 GitHub Pages），通常用來生成項目主頁等。具體設置在具體 repo 的 Settings -> Options -> GitHub Pages 中，選擇分支（一般是 master branch 即可），點擊 save 即可，比如我在 codedog 項目中生成的 demo。還有另一個方法，進入 GitHub & BitBucket HTML Preview 這個網站，生成靜態頁面鏈接，但是只適用于只有一個 HTML 頁面的場景，如果有引用 css 的話路徑會錯誤。

另外，如果有自己的服務器，那么很顯然部署到自己的服務器就可以了。

外鏈 demo 同樣大概三個方式，總結下：

codepen / jsfiddle / runjs

GitHub Pages

自己的服務器

重點重點，這才是本文的重點！

有的時候寫文章，需要配個簡單的 demo，怎么破？外鏈當然可以，但是沒有直接顯示在文章中顯得直觀。

我理想中的狀態是，可以用 markdown 寫文章，但是文章中有些代碼可以方便查看 HTML 效果。最后，我開發了 codedog 這個工具，用 markdown 寫文章，自動生成 html 文件，比如我前段時間在看 《CSS 揭秘》這本書，我用 markdown 做筆記，用 codedog 生成的 HTML 可以方便查看 CSS 效果，而且支持在線編輯，簡直是爽，具體實現效果可以 點擊這里 查看。

但是 codedog 這個工具是為了這個需求量身定做的，有一定的局限性，有時候要實現文章中帶 demo 的效果，不得不在 markdown 和 HTML 中取舍，比如我之前為了學習 flex 寫的 這個 demo，是純 HTML 寫的，且存在一定的特殊性（不可復用）

最后就要說到文章開頭說的 “發現了一個新的寫 demo 的思路”，做到首尾呼應，是什么呢？

通過設置 style 標簽的 display:block 樣式可以讓頁面的 style 標簽顯示出來，并且加上 contentEditable 屬性后可以讓樣式成為可編輯狀態，更改后的樣式效果也是實時更新呈現，這就給交互創造了新的可能。

之前的實現如果頁面有樣式，并且修改樣式直接預覽（類似 html editor1 或者 html editor2 ），其實實現是獲取 value 然后再插入 HTML 文檔流中，而通過設置 style 標簽的 display:block 樣式，操作的就是實際的樣式，不需要拐彎抹角。

寫了個簡單的 demo 可以看下，確實是另一種思路。

所以說，"文章中帶 demo" 所說的文章實現，可能是 HTML 的，也可能是 markdown 的，具體如何，需要視情況而定了。

總結下：

如果是 markdown 寫的文章（如果需要涉及 inline 的 demo），最后肯定是要編譯成 HTML 預覽，思路類似 codedog

如果直接用 HTML 寫文章，類似 這個)，那么我覺得復用性其實不是很高，畢竟交互方式是不一樣的（也可以沒有交互），這個時候（如果有交互），可以試試