Android 下 Markdown 渲染

Android 下的 webview 加载本地准备好的 html 外壳,然后通过与 js 交互将准备渲染的纯文本传给负责 markdown 渲染的 js 处理(此处使用的 marked.js ),将文本转化为 html 格式填充到 webview 中。

html 外壳

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
@font-face {
font-family: 'customFont';
src: url('file:///sdcard/manaco.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
body{
font-family: customFont; /* 设置字体 */
font-size: 12px; /* body 控制字体大小*/
color: #000; /* 设置颜色 */
line-height: 1.5em; /* 设置行高*
}
//....定义渲染的css
</style>
<!-- 加载 marked.js -->
<script src="marked.min.js"></script>
</head>
<body>
<div id="content" class="markdown-body"></div>
<script type="text/javascript">
// 渲染文本为 html
function parseMarkdown(content, gfmEnabled) {
marked.setOptions({
renderer: new marked.Renderer(),
gfm: gfmEnabled,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: false
});
document.getElementById('content').innerHTML = marked(content);
parseDone();
}
function parseDone() {
//通知 java 层渲染完成
}
function changeBackgroundColor(color){
document.body.style.background = color;
}
function changeFontSize(size){
document.body.style.fontSize = size;
}
function changeFontColor(color){
document.body.style.color= color;
}
function changeLineHeight(lineHeight){
document.body.style.lineHeight= lineHeight;
}
</script>
</body>
</html>

更改 webview 背景为透明

通过设置 webview 的属性

1
webView.setBackgroundColor(0); // 设置背景色透明

更改网页字体颜色

1
2
3
public void setFontColor(String color) {
mWebView.loadUrl(String.format("javascript:changeFontColor('%s')", color));
}

更改网页字体大小

1
2
3
public void setFontSize(float size) {
mWebView.loadUrl(String.format("javascript:changeFontSize(%s)", size));
}

更改网页行间距

1
2
3
public void setLineHeight(float lineHeight) {
mWebView.loadUrl(String.format("javascript:changeLineHeight(%s)", lineHeight));
}

更改网页字体

通过 CSS 中的 @font-face,具体看上一篇写的 Android 中 webview 自定义字体