267 lines
5.7 KiB
HTML
267 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<link href="./css/default.min.css" type="text/css" rel="stylesheet" />
|
|
<link href="./css/katex.min.css" type="text/css" rel="stylesheet" />
|
|
<style>
|
|
body,
|
|
html {
|
|
background: transparent;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
* {
|
|
/* padding: 0;
|
|
margin: 0; */
|
|
}
|
|
|
|
p,
|
|
h1,
|
|
h3,
|
|
h2,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
hr {
|
|
border-width: 1px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="layout">
|
|
|
|
</div>
|
|
|
|
<script src="./js/uni.webview.1.5.5.js"></script>
|
|
<script src="./js/highlight.min.js"></script>
|
|
<script src="./js/marked-highlight.js"></script>
|
|
<script src="./js/marked-tables.js"></script>
|
|
<script src="./js/katex.js"></script>
|
|
<script src="./js/marked.min.js"></script>
|
|
<script src="./js/marked-katex-extension.js"></script>
|
|
<script type="text/javascript">
|
|
var md;
|
|
|
|
function getBodyHeight() {
|
|
var targetDiv = document.body.querySelector("#layout")
|
|
let height = targetDiv.scrollHeight
|
|
document.body.style.height = (height) + 'px'
|
|
window.parent.postMessage({
|
|
action: 'offsetHeight',
|
|
data: height + 5,
|
|
iframeId: iframeId
|
|
}, '*');
|
|
uni.postMessage({
|
|
data: {
|
|
action: 'offsetHeight',
|
|
data: height
|
|
}
|
|
})
|
|
}
|
|
|
|
var targetDiv = document.querySelector("#layout")
|
|
// 创建一个观察者对象并传入回调函数
|
|
var observer = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.type === 'childList' || mutation.type === 'attributes') {
|
|
getBodyHeight()
|
|
}
|
|
});
|
|
});
|
|
|
|
// 配置观察选项:
|
|
var config = {
|
|
attributes: true,
|
|
childList: true,
|
|
characterData: true,
|
|
subtree: true
|
|
};
|
|
|
|
// 选择需要观察变动的节点
|
|
observer.observe(targetDiv, config);
|
|
|
|
|
|
// 监听 div 的点击事件
|
|
targetDiv.addEventListener('click', function(event) {
|
|
let attr = {
|
|
text: "",
|
|
attr: "",
|
|
tag: ""
|
|
}
|
|
|
|
// 检查点击的目标是否是 <a> 标签
|
|
if (event.target.tagName === 'A') {
|
|
// 阻止默认行为（如跳转）
|
|
event.preventDefault();
|
|
attr.text = event.target.textContent
|
|
attr.attr = event.target.href
|
|
attr.tag = "a"
|
|
|
|
} else if (event.target.tagName === 'IMG') {
|
|
attr.attr = event.target.src
|
|
attr.tag = "img"
|
|
}
|
|
if (attr.attr != '') {
|
|
window.parent.postMessage({
|
|
action: 'click',
|
|
data: attr,
|
|
iframeId: iframeId
|
|
}, '*');
|
|
uni.postMessage({
|
|
data: {
|
|
action: 'click',
|
|
data: attr
|
|
}
|
|
})
|
|
}
|
|
|
|
});
|
|
|
|
|
|
function processMarkdown(markdown) {
|
|
// 1. 分割成行
|
|
const lines = markdown.split('\n');
|
|
let inCodeBlock = false;
|
|
let codeBlockIndentation = 0;
|
|
let processedLines = [];
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
const line = lines[i];
|
|
const trimmedLine = line.trimLeft();
|
|
|
|
// 检测代码块开始
|
|
if (trimmedLine.startsWith('```')) {
|
|
if (!inCodeBlock) {
|
|
// 进入代码块
|
|
inCodeBlock = true;
|
|
// 记录代码块的缩进级别
|
|
codeBlockIndentation = line.length - trimmedLine.length;
|
|
// 移除开始标记的缩进
|
|
processedLines.push(trimmedLine);
|
|
} else {
|
|
// 退出代码块
|
|
inCodeBlock = false;
|
|
// 移除结束标记的缩进
|
|
processedLines.push(trimmedLine);
|
|
}
|
|
} else if (inCodeBlock) {
|
|
// 代码块内的内容保持原有缩进
|
|
processedLines.push(line);
|
|
} else {
|
|
// 非代码块内容保持不变
|
|
processedLines.push(line);
|
|
}
|
|
}
|
|
|
|
return processedLines.join('\n');
|
|
}
|
|
|
|
|
|
|
|
function markdown(nr, isHtml) {
|
|
let content = ''
|
|
|
|
if (typeof nr == 'string') {
|
|
let cto = JSON.parse(nr);
|
|
if (cto.render == 'android') {
|
|
content = decodeURIComponent(atob(cto.value))
|
|
} else {
|
|
content = decodeURIComponent(cto.value)
|
|
}
|
|
} else {
|
|
if (nr.render == 'android') {
|
|
content = decodeURIComponent(atob(nr.value))
|
|
} else {
|
|
content = decodeURIComponent(nr.value)
|
|
}
|
|
}
|
|
|
|
if (isHtml) {
|
|
document.querySelector("#layout").innerHTML = content
|
|
return;
|
|
}
|
|
|
|
|
|
document.getElementById('layout').innerHTML = md.parse(processMarkdown(content));
|
|
|
|
}
|
|
|
|
function setBodyStyle(stylenr, isHtml) {
|
|
targetDiv.style = stylenr;
|
|
|
|
}
|
|
|
|
function getHtml() {
|
|
|
|
window.parent.postMessage({
|
|
action: 'toValue',
|
|
data: targetDiv.innerhtml,
|
|
iframeId: iframeId
|
|
}, '*');
|
|
uni.postMessage({
|
|
data: {
|
|
action: 'toValue',
|
|
data: targetDiv.innerhtml
|
|
}
|
|
})
|
|
}
|
|
// 在iframe内部执行以下代码
|
|
var frameElement = window.frameElement;
|
|
var iframeId = frameElement == null ? "" : frameElement.getAttribute('id');
|
|
|
|
|
|
// 等待初始化完毕
|
|
document.addEventListener('UniAppJSBridgeReady', () => {
|
|
|
|
md = new marked.Marked(
|
|
markedHighlight({
|
|
emptyLangClass: 'hljs',
|
|
langPrefix: 'hljs language-',
|
|
highlight(code, lang, info) {
|
|
// const language = hljs.getLanguage(lang) ? lang : 'plaintext';
|
|
// return hljs.highlight(code, {
|
|
// language
|
|
// }).value;
|
|
}
|
|
})
|
|
);
|
|
|
|
md.use(extendedTables());
|
|
md.use(markedKatex({
|
|
throwOnError: false
|
|
}));
|
|
|
|
|
|
md.setOptions({
|
|
breaks: true,
|
|
gfm: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
window.parent.postMessage({
|
|
action: 'onJSBridgeReady',
|
|
data: '',
|
|
iframeId: iframeId
|
|
}, '*');
|
|
uni.postMessage({
|
|
data: {
|
|
action: 'onJSBridgeReady'
|
|
}
|
|
})
|
|
|
|
|
|
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |