- 实现效果
- 下载android_markdown模块
下载地址:https://github.com/jicanghai37927/WhatsAndroid/tree/master/andnext_markdown
- 创建MarkdownWebView控件
<club.andnext.markdown.MarkdownWebView
android:id="@+id/markdown_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
- 设置Markdown内容
markdownWebView.setText(text);
- 代码结构
package club.andnext.markdown;
MarkdownWebView.java
- 资源结构
assets
AndroidMarkdown.html // WebView预加载页面,负责渲染markdown文件
marked.0.5 // 使用marked解析markdown
github-markdown-css.2.10.0 // css样式
highlightjs.9.13.1 // 代码高亮
MarkdownWebView.java
MarkdownWebView继承自WebView,并且预先加载了AndroidMarkdown.html
文件用以渲染markdown内容。
AndroidMarkdown.html
AndroidMarkdown.html有三个部分组成:
marked.js
解析markdown内容,生成html内容;markdown.css
markdown的样式css,决定最终显示效果,使用的是GitHub样式;highlight.js
代码语法高亮;
- marked.js https://marked.js.org/
- github-markdown-css https://github.com/sindresorhus/github-markdown-css
- highlight.js https://highlightjs.org/