html初學者測試代碼（適合小白）

立一個文本文檔,復制粘貼如下代碼.將文件的后綴名改為.html.用谷歌瀏覽器打開可查看效果

有的效果,可能別的瀏覽器不支持.

我是阿平,自學編程的小白!大神請繞道!

<!doctype html>

<html>

<head>

<title>愛你的阿平</title>

</head>

<body>

<!-- <p><b>定義粗體文本</b></p>

<p><em>定義著重文字</em></p>

<p><i>定義斜體字</i></p>

<p><small>定義小號字<small></p>

<p><strong>定義重要的文本<strong></p>

<p><ins>定義插入字</ins></p>

<p><del>定義刪除字</del></p>

<nav>

<a href="/jquery">JQuery</a>

</nav>

<p>World Wide Web Consortium(W3C)是萬維網聯盟...</p>

</section>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World,Florida</p>

</aside>

你的瀏覽器不支持audio元素

</audio>

<br/>

你的瀏覽器不支持video標簽

</video>

<!-- 下載進度:

<br/>

<!-- </svg>

<!-- <svg width="1000" height="1000">

<!-- </svg>

<!-- <svg width="500" height="510">

<line x1="20" y1="20" x2="300" y2="300"

style="stroke:#000000;stroke-linecap:round; stroke-width:20" />

<!-- </svg>

<!-- <svg width="2000" height="500" >

<polyline style="stroke-linejoin:miter; stroke:orange; stroke-width:12; fill=none;"

points="100 100,150 150, 200 100" />

<!-- </svg>

<!-- </svg>

<!-- <svg width="1000" height="1000">

<polygon points="100 100,200 200, 300 0"

style="fill:Cyan; stroke:black;" />

</svg>

<!-- <svg width="1000" height="250">

</rect>

</svg>

<!-- <svg width="500" height="500">

</svg>

<!-- ctx.font="bold 20px Arial;

<!-- ctx.fillText=("阿平加油!",20,40);

</canvas> -->

<br/>

<form>

username:<input type="text" name="username" placeholder="用戶名" autofocus required autocomplete="愛你的阿平"/>

</form>

<option value="Internet Explorer">

</datalist>

<img src="http://m.qpic.cn/psb?/V13EM30s1KV4Be/cyuWdaEOm1w7Wj26pxCJ906Tr4iZc6FEBcwEZvRg7Mo!/b/dDIBAAAAAAAA&bo=CAc4BAAAAAARNzM!&rf=viewer_4" width="300" height="200" align="center" alt="思念" border="10"/>

</p>

</div>

<ul>

</ul>

<hr/>

<ol>

</ol>

<hr/>

</body>

</html>

<br>

注意: 有的標簽是沒有align屬性的,本代碼中有的align是無效的. 若要測試部分代碼的效果,請把"<!--" 刪除

于一些前端的樣式和js效果，我們非常希望可以將這些代碼片段保存起來，然后分享給那些想要使用這些樣式特效的人，慶幸的是，網絡上已經有很多這樣的網站了，今天我們就來盤點一下這些非常好用的網站。

jsfiddle

誕生比較早的一個代碼片段網站，它集成了主流的js框架，你可以輕松地在需要使用的時候引入它們，同時它也支持引入外部css鏈接，通過將html，css,js代碼片段分離，讓用戶有了非常清楚的代碼結構，非常方便代碼地調試。

它支持登錄功能，登錄以后，你可以將自己的代碼片段進行保存和分享。

JSRUN

一個支持多種編程語言的代碼運行網站，你可以保存自己的代碼，你可以運行各個常用的編程語言代碼，缺點是有時候需要輸入驗證碼，有些功能需要升級vip才能使用。

codepen

和jsfiddle很類似，也是專業的網頁編輯器，可以引入js,css,對于html,js,css分為三個窗口進行管理，登錄之后可以保存代碼片段和分享代碼片段。即使不登錄，也可以使用它進行臨時的代碼編輯和測試。

jsbin

也是一款在線代碼編輯網站，也是可以編輯html和css，js代碼片段，可以引入第三方庫，可以引入第三方css，可以查看控制臺的輸出。

它可以保存截圖，可以生成模板，同樣也支持代碼打包下載。

cssdeck

它提供了很多優秀的代碼案例，如果你沒有思路或者僅僅只是想欣賞下他人的優秀代碼，你可以來這里找到你想要的，類似于jsfiddle,它也是支持html，js，css代碼編輯的，它的展示頁面看起來很大，非常方便查看。

它的html支持markdown和slime進行處理，它的js支持coffeescript,它的css支持sass,scss,less等。

dabblet

它主要支持的是css代碼塊的測試，它目前不支持js，它的代碼編輯塊字體可以非常方便地進行調整。

總結

網上有很多類似的代碼編輯網站，如果你感興趣的話，你也可以去github上查看Plunker等項目開源代碼進行分析研究，自行搭建屬于自己的代碼片段編輯網站。

過一個階段測試，終于找到兩個 markdown 轉 html 并實現代碼高亮的工具，并以最簡代碼（幾十行）實現了炫酷的展示效果。步驟很少，也很簡單，零基礎也應該一看就會。往下看吧......，需要安裝有Node環境哦！

1 緣起

因為markdown 文檔編輯器具有語法簡單、文件簡潔、標準化、使用廣泛等特點，所以一直習慣采用 markdown 編輯器寫文章，但仍有一些網站不支持 markdown 編輯器，想嘗試將 markdown 轉成 html 再發布，采用 Javascript 來實現，尤其想達到 CSDN 博客、簡書這樣的展示效果。

圖1 CSDN 博客 markdown 文章及代碼塊高亮效果

圖2 簡書 markdown 文章及代碼高亮效果

2 插件選擇及應用模式

2.1 插件選擇

2.1.1 markdown 轉 html 插件

比較常用的 M2H 插件有：

Markdown-it 中文：https://markdown-it.docschina.org/ github：https://github.com/markdown-it/markdown-it
Marked 官網：https://marked.js.org/ github：https://github.com/markedjs/marked

從網上獲得的 markdown-it 和 marked 的比較，主要表現在：在性能、使用簡單程度、正則解析（中文支持）方面，marked 比較好；在擴展性上，markdown-it 表現則更好一些。由于 markdown 應用比較成熟，而且一般使用也不會太復雜，所以選擇性能好、中文支持好的 marked，至于 marked 的擴展性，也嘗試了一下，滿足常見的應用是沒問題的。

2.1.2 代碼塊高亮模塊

代碼塊高亮插件有：

heiglightjs 官網：https://highlightjs.org/ github：https://github.com/highlightjs/highlight.js
prismjs 官網：https://prismjs.com/ github：https://github.com/PrismJS/prism

對 heiglightjs 和 prismjs 分別做了簡單測試，發現 prismjs 使用非常簡單，易于上手，且代碼精簡，效率高，而 heiglightjs 相對比較復雜，使用起來不習慣，也許是各人喜好不同吧。所以選擇使用 prismjs 插件。

2.2 插件應用模式

M2H 一般有兩種應用模式：一種是前端渲染，如在 vue 中使用；另一種是在后端生成 html 文件，在瀏覽器展示，如在 node 中使用。此處我選擇在 node 中生產靜態 html 文件的應用模式，用戶可以在電腦端當作 markdown 轉 node 的工具使用；至于前端渲染，vue 頁面打包時總會包含一個 chunk-vendors.js 文件，會引起頁面加載變慢，有很多辦法壓縮該文件，但這已經超出了 M2H 的范疇了，在此不再贅述。

3 計劃實現的功能

讀取指定 mardown 文件（test.md），生成目標 html 文件（test.html）——測試 marked 插件解析及渲染功能
html 文件根據代碼塊對應的語言進行高亮顯示——測試 prismjs 插件的 language 語言包功能
html 文件實現顯示語言名稱、“復制”按鈕、行號——測試 prismjs 插件的 Plugins 功能
自定義代碼塊的顯示樣式修改——測試拓展功能
最終實現的界面如下圖：

圖3 最終實現的markdown 轉化及代碼塊渲染效果

4 編碼實現

4.1 準備工作

4.1.1 創建項目

創建目錄：marked-prismjs，使用 vsCode 打開該目錄。

4.1.2 安裝插件

在 vsCode 里的終端輸入相關命令進行插件安裝 1）安裝 marked 插件

npm install marked --save

2）安裝 prismjs

npm install prismjs --save

4.1.3 下載 prismjs 的 css 和 js 文件

訪問官網下載頁：https://prismjs.com/download.html

按下圖選擇 themes，我比較喜歡“Tomorrow Night” 這個主題，您可以根據自己的喜好選擇

圖4 themes 選項

Languages 選項，默認即可，如下圖，其中包含 CSS、Javascript 語言

圖5 編程語言包選項

Plugins 選項，可以根據功能需要選擇，此處選擇4個選項，依次為：行號、顯示語言名稱、工具條、復制到剪貼板的按鈕，如下圖：

圖6 插件選項

分別點擊下圖的“DOWNLOAD JS”和“DOWNLOAD CSS”按鈕下載 prism.js 和 prism.css 到項目根目錄下。

4.1.4 編寫 markdown 測試文件

編寫 markdown 測試文件：test.md，內容如下：

# 這是H1標簽

## 下面是 javascript 代碼：

```javascript let a = 1; console.log(a); ```

4.2 編寫實現轉換功能的 js 文件

創建 m2h.js 文件，內容為：

const { marked } = require('marked') // 引入 marked 模塊
const prism = require('prismjs') // 引入 prism 模塊
const fs = require('fs') // 引入文件處理模塊
const mdContent = fs.readFileSync('test.md', 'utf-8') // 讀取 markdown 文件內容
// 下面是 marked 擴展功能，當節點（token）類型是代碼（code）時，自定義渲染節點功能，及使用自定義的 renderer 函數來代替默認 renderer 函數，達到改寫當前節點生成的 html 代碼的樣式
marked.use({
    extensions: [{
        name: 'code',   
        renderer(token) {
            if (token.type === 'code') {
                let codeHtml = `<pre class="language- round"><code class="language-`+token.lang+` line-numbers">`
                codeHtml+=Prism.highlight(token.text, Prism.languages.javascript, 'javascript')
                codeHtml+=`</code></pre>`
                return codeHtml
            }
        }
    }]
})
// 定義 html 文件頭部代碼
var htmlContent=`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="prism.css">
    <script src="prism.js"></script>
</head>
<style>
  .round {
    box-shadow: 10px 10px 5px #888888;
    border-radius: 10px;
  }
</style>
<body>
`
htmlContent += marked.parse(mdContent) // 疊加上 marked 生成的 html 代碼
htmlContent+=`</body> // 疊加底部代碼（補齊）
</html>`
fs.writeFileSync('test.html', htmlContent) // 將最終的 html 內容寫入到文件 test.html

測試運行：

node m2h.js

每運行一次，就會重新生成新的 test.html 文件。

在 vsCode 里鼠標右鍵點擊 test.html 文件，選擇“Open with Live Server”，

圖7 Open with LiveServer

會在瀏覽器里打開 test.html 頁面，test.md 已經成功生成了 test.html，實現了代碼塊高亮、語言顯示及拷貝按鈕及行號。得到的最終結果如下圖：

圖8 效果展示

達到了當初計劃實現的功能需求。

5 總結

以上通過簡單的幾十行代碼就實現了如此炫酷的功能展示，體現了插件的強大功能，同時通過自定義擴展節點渲染函數，也展現了插件的靈活性和可擴展性。此次測試僅僅是個引子，后續會繼續進行研究和測試，感興趣請收藏、關注，方便共同學習、進步。

在線咨詢

上一篇：css零基礎自學教程（七）css鏈接樣式，自定鼠標樣式
下一篇：JavaScript 基本變量語法的使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html初學者測試代碼（適合小白）

jsfiddle

JSRUN

codepen

jsbin

cssdeck

dabblet

總結

1 緣起

2 插件選擇及應用模式

2.1 插件選擇

2.1.1 markdown 轉 html 插件

2.1.2 代碼塊高亮模塊

2.2 插件應用模式

3 計劃實現的功能

4 編碼實現

4.1 準備工作

4.1.1 創建項目

4.1.2 安裝插件

4.1.3 下載 prismjs 的 css 和 js 文件

4.1.4 編寫 markdown 測試文件

4.2 編寫實現轉換功能的 js 文件

5 總結

您的項目需求