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 自定义字体