webview展示本地的HTML文件来显示Markdown

起因:Android 显示markdown格式文本。

要显示markdown,思路是把markdown格式转换成html标签格式。

1.使用

这个库里的MarkdownView 本身就是继承自WebView。

直接调用该view的loadMarkdown(“markdown格式的文本”);方法。

该方法中的

MarkdownProcessor m = new MarkdownProcessor();
String html = m.markdown(txt);
就是将markdown格式转换成html标签格式

这种方法存在的问题:

1.表格无法显示
2.该换行的时候没有换行

然后使用了另一个<markdown格式转换成html标签格式>的lib

html = new Markdown4jProcessor().process(txt);
替换
MarkdownProcessor m = new MarkdownProcessor();
String html = m.markdown(txt);
表格还是无法优雅显示(单元格无边框,以|分割),但是可以换行了。

其实此处直接使用WebView来加载转换后的html格式的字符串就可以了。

2.使用js库<把markdown格式转换成html标签格式>

重要的文件是 marked.js,下载下来放在assets文件夹中,再在assets中新建一个html文件

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Marked in the browser</title>
   <script src="marked.js"></script>
</head>
<body>
  <div id="content"></div>
  <script>
    document.getElementById(content).innerHTML =
      marked(最期待功能前10名
![替代文字](https://wt-prj.oss.aliyuncs.com/1c9327bc704581/2e8b76ed-2f8a-41be-9835-3902f550460e.png)

**通知提醒:10票**

* 通知按主题聚合
*,{breaks: true});
  </script>
</body>
</html>

其中的{breaks:true} 是因为:标准的markdown语法 是换行,而此处想让 就换行,加上这个属性就可以做到 换行。

在Activity中使用:

WebView webView = (WebView) findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDefaultTextEncodingName("utf-8");
        webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
        webView.loadUrl(url);

这种方法只能显示固定的内容。

要想显示从服务器上获取的内容webView 需要增加 JavaScriptInterface

<pre name="code" class="java">webView.<span style="font-family: Arial, Helvetica, sans-serif;">addJavascriptInterface(new JsInterface("markdown 格式的文本"), "JsInterface");</span>
JsInterface类的代码:
import android.webkit.JavascriptInterface;

public class JsInterface {

    private String content;

    public JsInterface(String content) {
        this.content = content;
    }

    
    @JavascriptInterface
    public String getContent() {
        return content;
    }

}

在html文件中:

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Marked in the browser</title>
   <script src="marked.js"></script>
</head>
<body>
  <div id="content"></div>
  <script>
	var html = JsInterface.getContent();
    document.getElementById(content).innerHTML =marked(html,{breaks: true});
  </script>
</body>
</html>

推荐给大家翻墙工具红杏   
经验分享 程序员 微信小程序 职场和发展