android&ios webView加载MarkDown 或者html代码片段

最新推荐文章于 2025-03-08 15:41:13 发布

lidongxiu0714

最新推荐文章于 2025-03-08 15:41:13 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： android基础 java面试小问题文章标签： webView加载代码片段 markdown android webview md

本文链接：https://blog.youkuaiyun.com/u010126792/article/details/82460614

android基础同时被 2 个专栏收录

63 篇文章

订阅专栏

java面试小问题

41 篇文章

订阅专栏

本文介绍了一种将Markdown或HTML片段加载到Android WebView中的简单方法。通过使用marked.js库，可以轻松地将Markdown转换为HTML，并进一步在WebView中显示，适用于App内的新闻或文章展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多app详情页的新闻主体是html或者markdown片段，这里介绍一种简单的加载方式：

利用marked.js（https://github.com/chjj/marked）和webView就可以实现片段加载。

//bodyHtml 就是要加载的md或者html片段。
private String getHtmlData(String bodyHTML) {

        String head = "<!doctype html>\n" +
                "<html>\n" +
                "<head>\n" +
                "  <meta charset=\"utf-8\"/>\n" +
                "  <title>Marked in the browser</title>\n" +
                " <script type=\\\"text/javascript\\\" src = \\\"file:///android_asset/marked.js\\\" /></script>\n" +
                "</head>\n" +
                "<body>\n" +
                "  <div id=\"content\"></div>\n" +
                "  <script>\n" +
                "    document.getElementById('content').innerHTML =\n" +
                "      marked('";

        String other = "');\n" +
                "  </script>\n" +
                "</body>\n" +
                "</html>";

        //可以添加viewport 属性和展示图片的样式，也可以直接在代码片段中直接添加。
      /*  String head = "<head>" +
                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> " +
                "<style>img{max-width: 100%; width:auto; height:auto;} div{width:100% }</style>" +
                "</head>";*/
        return  head + bodyHTML + other;
    }

//Android webView 加载方式
  webView.loadData(getHtmlData(getContent().toString().replaceAll("\r\n","<br>"), "text/html; charset=UTF-8", null);