代碼高亮_Flutter 開發從 0 到 1（六）Markdown 與代碼高亮

《Fluuter 開發從 0 到 1》部落格詳情是 Markdown，今天就來說說 Flutter Markdown 如何實作的。

先劇透下，今天的主角是 flutter_markdown，可以實作從使用簡單的 Markdown 标記格式化的純文字資料建立富文本輸出，包括文本樣式，表格，連結等。

準備

1. 添加依賴

将 flutter_markdown 添加到 pubspec.yaml 檔案中：

1. 安裝

項目根目錄執行如下指令安裝 flutter_markdown：

使用

使用 Markdown 很簡單，隻需将源 markdown 作為字元串傳遞，參數如下：

syntaxHighlighter 可以設定代碼高亮，這裡有個坑，需要結合插件 syntax_highlighter 一起使用，後面再說。

執行個體

我們用《Fluuter 開發從 0 到 1(四)ListView 下拉加載和加載更多》md 檔案用于測試，放到項目根目錄 assets 檔案夾下，在 pubspec.yaml 中引用：

代碼中擷取：

完整代碼如下：

效果如下：

Markdown 檔案完美展示了，但發現代碼沒有高亮，對于我這個有強迫症的人，不允許。

代碼高亮

Flutter 插件 syntax_highlighter 可以是代碼高亮，如果是有文字+代碼這種形式，就不會高亮，這裡需要結合 flutter_markdown 一起使用。

1. 添加 syntax_highlighter

将 syntax_highlighter 添加到 pubspec.yaml 檔案中：

1. 安裝

項目根目錄執行如下指令安裝 flutter_markdown：

1. 代碼高亮

看 flutter_markdown 的 syntaxHighlighter 參數類是抽象類：

建立 my_markdown_style.dart 繼承 SyntaxHighlighterfu override format 方法：

這樣在 flutter_markdown syntaxHighlighter 參數可以這樣寫：

效果如下：

代碼高亮了，效果很完美，更多代碼細節詳見《Flutter 開發從 0 到 1(五)源碼》。