修复md图片显示

2025-01-09 04:17:45 +08:00 · 2024-04-06 03:01:44 +08:00 · 2024-04-06 03:01:44 +08:00 · bc5fc7cc03
commit bc5fc7cc03
parent a50a433233
7 changed files with 141 additions and 96 deletions
--- a/app/src/main/assets/web/help/css/github-markdown-light.min.css
+++ b/app/src/main/assets/web/help/css/github-markdown-light.min.css
--- a/app/src/main/assets/web/help/css/highlight.min.css
+++ b/app/src/main/assets/web/help/css/highlight.min.css
@ -1,97 +1,132 @@
-/*
+.theme-vs2015-min pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+}

-Atom One Dark With support for ReasonML by Gidi Morris, based off work by Daniel Gamage
+.theme-vs2015-min code.hljs {
+    padding: 3px 5px;
+}

-Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+.theme-vs2015-min .hljs {
+    background: #1e1e1e;
+    color: #dcdcdc;
+    padding: 1rem;
+    display: block;
+}

-*/
-.hljs {
-	color: #abb2bf;
-	background: #282c34;
+.theme-vs2015-min .hljs-keyword,
+.theme-vs2015-min .hljs-literal,
+.theme-vs2015-min .hljs-name,
+.theme-vs2015-min .hljs-symbol {
+    color: #569cd6;
 }
-.hljs-keyword,
-.hljs-operator {
-	color: #f92672;
+
+.theme-vs2015-min .hljs-link {
+    color: #569cd6;
+    text-decoration: underline;
 }
-.hljs-pattern-match {
-	color: #f92672;
+
+.theme-vs2015-min .hljs-built_in,
+.theme-vs2015-min .hljs-type {
+    color: #4ec9b0;
 }
-.hljs-pattern-match .hljs-constructor {
-	color: #61aeee;
+
+.theme-vs2015-min .hljs-class,
+.theme-vs2015-min .hljs-number {
+    color: #b8d7a3;
 }
-.hljs-function {
-	color: #61aeee;
+
+.theme-vs2015-min .hljs-meta .hljs-string,
+.theme-vs2015-min .hljs-string {
+    color: #d69d85;
 }
-.hljs-function .hljs-params {
-	color: #a6e22e;
+
+.theme-vs2015-min .hljs-regexp,
+.theme-vs2015-min .hljs-template-tag {
+    color: #9a5334;
 }
-.hljs-function .hljs-params .hljs-typing {
-	color: #fd971f;
+
+.theme-vs2015-min .hljs-formula,
+.theme-vs2015-min .hljs-function,
+.theme-vs2015-min .hljs-params,
+.theme-vs2015-min .hljs-subst,
+.theme-vs2015-min .hljs-title {
+    color: #dcdcdc;
 }
-.hljs-module-access .hljs-module {
-	color: #7e57c2;
+
+.theme-vs2015-min .hljs-comment,
+.theme-vs2015-min .hljs-quote {
+    color: #57a64a;
+    font-style: italic;
 }
-.hljs-constructor {
-	color: #e2b93d;
+
+.theme-vs2015-min .hljs-doctag {
+    color: #608b4e;
 }
-.hljs-constructor .hljs-string {
-	color: #9ccc65;
+
+.theme-vs2015-min .hljs-meta,
+.theme-vs2015-min .hljs-meta .hljs-keyword,
+.theme-vs2015-min .hljs-tag {
+    color: #9b9b9b;
 }
-.hljs-comment,
-.hljs-quote {
-	color: #b18eb1;
-	font-style: italic;
+
+.theme-vs2015-min .hljs-template-variable,
+.theme-vs2015-min .hljs-variable {
+    color: #bd63c5;
 }
-.hljs-doctag,
-.hljs-formula {
-	color: #c678dd;
+
+.theme-vs2015-min .hljs-attr,
+.theme-vs2015-min .hljs-attribute {
+    color: #9cdcfe;
 }
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-	color: #e06c75;
+
+.theme-vs2015-min .hljs-section {
+    color: gold;
 }
-.hljs-literal {
-	color: #56b6c2;
+
+.theme-vs2015-min .hljs-emphasis {
+    font-style: italic;
 }
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta .hljs-string {
-	color: #98c379;
+
+.theme-vs2015-min .hljs-strong {
+    font-weight: 700;
 }
-.hljs-built_in,
-.hljs-title.class_,
-.hljs-class .hljs-title {
-	color: #e6c07b;
+
+.theme-vs2015-min .hljs-bullet,
+.theme-vs2015-min .hljs-selector-attr,
+.theme-vs2015-min .hljs-selector-class,
+.theme-vs2015-min .hljs-selector-id,
+.theme-vs2015-min .hljs-selector-pseudo,
+.theme-vs2015-min .hljs-selector-tag {
+    color: #d7ba7d;
 }
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-	color: #d19a66;
+
+.theme-vs2015-min .hljs-addition {
+    background-color: #144212;
+    display: inline-block;
+    width: 100%;
 }
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-	color: #61aeee;
+
+.theme-vs2015-min .hljs-deletion {
+    background-color: #600;
+    display: inline-block;
+    width: 100%;
 }
-.hljs-emphasis {
-	font-style: italic;
+
+pre {
+    position: relative;
 }
-.hljs-strong {
-	font-weight: bold;
-}
-.hljs-link {
-	text-decoration: underline;
+
+small {
+    position: absolute;
+    top: 0;
+    right: 0;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+    background-color: #7777;
+    border-bottom-left-radius: 0.375rem;
+    color: #dcdcdc;
 }
--- a/app/src/main/assets/web/help/js/main.js
+++ b/app/src/main/assets/web/help/js/main.js
@ -1,31 +1,34 @@
 require.config({
    baseUrl: 'js',
    paths: {
-        markdownit: 'markdown-it.min',
+        marked: 'marked.min',
+        markedHighlight: 'marked-highlight.umd',
        highlight: 'highlight.min',
    },
    shim: {
+        marked: {
+            exports: 'marked',
+        },
+        markedHighlight: {
+            exports: 'markedHighlight',
+        },
        highlight: {
            exports: 'hljs',
        },
    },
 });

-require(['markdownit', 'highlight'], (mdit, hljs) => {
-    const md = mdit({
-        html: false, // 在源代码中启用 HTML 标签
-        xhtmlOut: false, // 使用“/”关闭单个标签 (<br />)。 这仅用于完全兼容 CommonMark。
-        breaks: false, // 将段落中的 '\n' 转换为 <br>
-        langPrefix: 'language-', // 代码块的 CSS 属性前缀。用于代码高亮插件。
-        linkify: false, // 自动将类似 URL 的文本转换为链接
-        typographer: false, // 启用一些语言中立的替换+引号美化
-        quotes: '“”‘’',
-        highlight: function (code, lang) {
-            let language = hljs.getLanguage(lang)?.name ?? 'plaintext';
-            if (language.includes('HTML')) language = 'xml';
-            return hljs.highlight(code, {language}).value;
-        },
-    });
+require(['marked', 'markedHighlight', 'highlight'], (marked, mdhl, hljs) => {
+    marked.use(
+        mdhl.markedHighlight({
+            langPrefix: 'theme-vs2015-min hljs language-',
+            highlight(code, lang) {
+                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                const result = hljs.highlight(code, {language});
+                return result.value;
+            },
+        })
+    );

    const path = '/help/md/';
    const file = location.hash.slice(1).trim();
@ -33,6 +36,6 @@ require(['markdownit', 'highlight'], (mdit, hljs) => {
    fetch(`${path}${file}.md`)
        .then((response) => response.text())
        .then((md_text) => {
-            document.getElementById('mdviewer').innerHTML = md.render(md_text);
+            document.getElementById('mdviewer').innerHTML = marked.parse(md_text);
        });
 });
--- a/app/src/main/assets/web/help/js/markdown-it.min.js
+++ b/app/src/main/assets/web/help/js/markdown-it.min.js
--- a/app/src/main/assets/web/help/js/marked-highlight.umd.js
+++ b/app/src/main/assets/web/help/js/marked-highlight.umd.js
@ -0,0 +1,3 @@
+(function(global,factory){typeof exports==='object'&&typeof module!=='undefined'?factory(exports):typeof define==='function'&&define.amd?define(['exports'],factory):(global=typeof globalThis!=='undefined'?globalThis:global||self,factory(global.markedHighlight={}))})(this,(function(exports){'use strict';function markedHighlight(options){if(typeof options==='function'){options={highlight:options}}if(!options||typeof options.highlight!=='function'){throw new Error('Must provide highlight function');}if(typeof options.langPrefix!=='string'){options.langPrefix='language-'}return{async:!!options.async,walkTokens(token){if(token.type!=='code'){return}const lang=getLang(token.lang);if(options.async){return Promise.resolve(options.highlight(token.text,lang,token.lang||'')).then(updateToken(token))}const code=options.highlight(token.text,lang,token.lang||'');if(code instanceof Promise){throw new Error('markedHighlight is not set to async but the highlight function is async. Set the async option to true on markedHighlight to await the async highlight function.');}updateToken(token)(code)},renderer:{code(code,infoString,escaped){const lang=getLang(infoString);const classAttr=lang?`${options.langPrefix}${escape(lang)}`:'';code=code.replace(/\n$/,'');return`
+<pre class="${classAttr}"><span class="hljs"><code>${escaped?code:escape(code,true)}\n</code></span><small calss="lang-label">${lang}</small></pre>
+`}}}}function getLang(lang){return(lang||'').match(/\S*/)[0]}function updateToken(token){return(code)=>{if(typeof code==='string'&&code!==token.text){token.escaped=true;token.text=code}}}const escapeTest=/[&<>"']/;const escapeReplace=new RegExp(escapeTest.source,'g');const escapeTestNoEncode=/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;const escapeReplaceNoEncode=new RegExp(escapeTestNoEncode.source,'g');const escapeReplacements={'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'};const getEscapeReplacement=(ch)=>escapeReplacements[ch];function escape(html,encode){if(encode){if(escapeTest.test(html)){return html.replace(escapeReplace,getEscapeReplacement)}}else{if(escapeTestNoEncode.test(html)){return html.replace(escapeReplaceNoEncode,getEscapeReplacement)}}return html}exports.markedHighlight=markedHighlight}));
--- a/app/src/main/assets/web/help/js/marked.min.js
+++ b/app/src/main/assets/web/help/js/marked.min.js
--- a/app/src/main/assets/web/help/md/xpathHelp.md
+++ b/app/src/main/assets/web/help/md/xpathHelp.md
@ -31,7 +31,7 @@ _注：本文所有代码均通过 Chrome(版本 123.0.6312.86) 验证_
 > xpath 通过"路径表达式"（Path Expression）来选取元素。  
 > 在形式上，"路径表达式"与传统的文件系统非常类似。

-```
+```txt
 # "/"斜杠作为路径内部的分割符。
 # 同一个元素有绝对路径和相对路径两种写法。
 # 绝对路径必须用"/"起首，后面紧跟根元素，比如/step/step/...。
@ -42,7 +42,7 @@ _注：本文所有代码均通过 Chrome(版本 123.0.6312.86) 验证_

 ### 二、选取元素的基本规则

-```
+```txt
 - "/"：表示选取根元素
 - "//"：表示选取任意位置的某个元素
 - nodename：表示选指定名称的元素