React-markdown -- 實時渲染 Markdown 的 React 工具

日期: 31/08/2017

前言

要寫出優雅的文檔是有難度的,尤其是需要格式規範的文章。而利用 Markdown,則可以專心寫作。Markdown 除了可以直接編譯為 HTML,還能編譯為 PowerPoint, Resume,還有 React 組件。無論是利用 Markdown 製作 PowerPoint,還是利用 Markdown 製作簡歷,都是非常方便的。如果你不是很熟悉 Markdown 語法的話,你可以在下文看 Markdown 語法。但是如果可以接受他人傳進來的 Markdown 文章,然後渲染他們的文章,那就會更加好。所以我就找了一下 React + Markdown 的組合,發現這個 React-markdown 工具下載的人數蠻多的。雖然那個項目還在開發階段,但是你可以在 Live Demo 測試一下渲染為 React 組件的效果。


react-markdown

Github: https://github.com/rexxars/react-markdown npmjs: https://www.npmjs.com/package/react-markdown

安裝

npm install --save react-markdown

使用方法

使用 ES6 Import ReactMarkdown,然后使用 <ReactMarkdown />,並傳入 Markdown 到 source。

import ReactMarkdown from 'react-markdown';

const input = '# This is a header\n\nAnd this is a paragraph';

<ReactMarkdown source={input} />

然後你會看到這樣的:

官網上是這樣說的:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactMarkdown = require('react-markdown');

var input = '# This is a header\n\nAnd this is a paragraph';

ReactDOM.render(
    <ReactMarkdown source={input} />,
    document.getElementById('container')
);

Webpack 1 配置

如果你是用 Webpack 1 的話,你需要安裝 json-loader:

npm install --save json-loader

並在你的 webpack 設置裡面加上:

{
  module: {
    loaders: [{
      test: /\.json$/,
      loader: 'json-loader'
    }]
  }
}

如果你設置 escapeHtmlskipHtmltrue,該組件就不會使用dangerouslySetInnerHTML

選項

以下選項除了source之外都是可選的,其實這個工具已經配置成開箱即用,這裡就說幾個最底部的選項,更多的選項請去官網看。

  • source - 你的 Markdown 來源(必須)- string
  • className - 容器的 className - string
  • containerTagName - 容器的標籤名字 ,因為 Markdown 會有很多不同層次的 elements,容器需要把它們封裝。默認是div - string

這個渲染器會渲染的組件有:

  • HtmlInline - 行內 HTML
  • HtmlBlock - HTML 塊
  • Text - 文字 (在段落裡面)
  • Paragraph - 段落 (<p>)
  • Heading - 標題 (<h1>, <h2> etc)
  • Softbreak - 換行
  • Hardbreak - 斷行(強制換行) (<br>)
  • Link - 鏈接 (<a>)
  • Image - 圖像 (<img>)
  • Emph - 強調 (<em>)
  • Code - Inline code nodes (<code>)
  • CodeBlock - Blocks of code (<code>)
  • BlockQuote - 參照 (<blockquote>)
  • List - 列表 (<ol>, <ul>)
  • Item - 列表 (<li>)
  • Strong - Strong/bold nodes (<strong>)
  • ThematicBreak - 水平分割線 (<hr>)

Markdown 語法

Markdown 的目標是易讀易寫,而它能夠幫助程序員專注開發,減少編寫文檔時候遇到的格式問題。Markdown 和 HTML 的寫法差不多,雖然 HTML 已經很容易寫,但是 Markdown 則是更加格式化,如果你直接閱讀 Markdown 文檔,你也可以想象到它渲染後的樣式。

標題

# H1
## H2
### H3

清單

無序清單使用*, +-,而我這是常用-

*   Red
*   Green
*   Blue

+   Red
+   Green
+   Blue

-   Red
-   Green
-   Blue

有序清單則使用數字接著一個英文句點:

1.  Apple
2.  Banana
3.  Watermelon

後記

順帶說一下,我的博客已經配置好 Service Worker,現在可以離線訪問網站。也就是下次訪問的時候,即使沒有 Wifi 或者連接到網絡,你也能夠瀏覽到文章內容。

有機會的話,我會說說如何配置 Service Worker,以及當中的原理。

我的簡歷也差不多重構一次了(逃。。。

如果你覺得我的文章對你有幫助的話,希望可以推薦和交流一下。歡迎關注和 Star 本博客或者關注我的 Github