1、添加数学公式渲染功能；2、增加数学公式渲染自定义指令（只适用h5）;3、修改package.json
chris
2 months ago
parent
32ddbd1316
commit
9d073a9d06
@ -0,0 +1,6 @@
|
||||
import mathJax from './mathJax'
|
||||
|
||||
export default function registerDirectives (app) {
|
||||
// 注册全局指令
|
||||
app.directive(mathJax.name, mathJax.inserted)
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
// 该指令只支持H5
|
||||
import renderMath from '@/utils/mathJax/renderMath.js'
|
||||
|
||||
export default {
|
||||
name: 'math',
|
||||
inserted (el, binding) {
|
||||
if (!binding.value) return;
|
||||
// console.log(binding.value)
|
||||
// console.log(Reflect.ownKeys(el.__vnode.el))
|
||||
// console.log(el.__vnode)
|
||||
el.__vnode.el.innerHTML = renderMath(binding.value)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
declare namespace UniCrazyGlobalTypes {
|
||||
interface UniCrazyRouterParams {
|
||||
passedParams?: object | null;
|
||||
routeParams?: object | null;
|
||||
}
|
||||
}
|
||||
|
||||
declare namespace UniApp {
|
||||
interface RedirectToOptions extends UniCrazyGlobalTypes.UniCrazyRouterParams {}
|
||||
interface ReLaunchOptions extends UniCrazyGlobalTypes.UniCrazyRouterParams {}
|
||||
interface SwitchTabOptions extends UniCrazyGlobalTypes.UniCrazyRouterParams {}
|
||||
interface NavigateBackOptions extends UniCrazyGlobalTypes.UniCrazyRouterParams {}
|
||||
interface NavigateToOptions extends UniCrazyGlobalTypes.UniCrazyRouterParams {}
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
/// <reference path="./global.d.ts" />
|
||||
type to = {
|
||||
url: string;
|
||||
query?: object | null;
|
||||
jumpType: string;
|
||||
search?: string;
|
||||
} & UniCrazyGlobalTypes.UniCrazyRouterParams;
|
||||
type from = ({
|
||||
url: string;
|
||||
query?: object | null;
|
||||
search?: string;
|
||||
} & UniCrazyGlobalTypes.UniCrazyRouterParams) | null | undefined;
|
||||
interface callWithNext {
|
||||
(hook: (to: to, from: from, next: Function) => void) : Function;
|
||||
}
|
||||
interface callWithoutNext {
|
||||
(hook: (to: to, from: from) => void): Function;
|
||||
}
|
||||
interface normalCall {
|
||||
(call: Function): void;
|
||||
}
|
||||
export const beforeEach: callWithNext;
|
||||
export const afterEach: callWithoutNext;
|
||||
export const onError: callWithoutNext;
|
||||
export const afterNotNext: normalCall;
|
||||
interface uniCrazyRouter {
|
||||
beforeEach: callWithNext;
|
||||
afterEach: callWithoutNext;
|
||||
onError: callWithoutNext;
|
||||
afterNotNext: normalCall;
|
||||
install: any;
|
||||
}
|
||||
declare const uniCrazyRouter: uniCrazyRouter;
|
||||
export default uniCrazyRouter;
|
||||
// for Vue2
|
||||
declare module "vue/types/vue" {
|
||||
interface Vue {
|
||||
$routeParams?: object | null;
|
||||
$passedParams?: object | null;
|
||||
}
|
||||
}
|
||||
|
||||
// for Vue3
|
||||
declare module '@vue/runtime-core' {
|
||||
interface ComponentCustomProperties {
|
||||
$routeParams?: object | null;
|
||||
$passedParams?: object | null;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,49 @@
|
||||
/// <reference path="./global.d.ts" />
|
||||
type to = {
|
||||
url: string;
|
||||
query?: object | null;
|
||||
jumpType: string;
|
||||
search?: string;
|
||||
} & UniCrazyGlobalTypes.UniCrazyRouterParams;
|
||||
type from = ({
|
||||
url: string;
|
||||
query?: object | null;
|
||||
search?: string;
|
||||
} & UniCrazyGlobalTypes.UniCrazyRouterParams) | null | undefined;
|
||||
interface callWithNext {
|
||||
(hook: (to: to, from: from, next: Function) => void) : Function;
|
||||
}
|
||||
interface callWithoutNext {
|
||||
(hook: (to: to, from: from) => void): Function;
|
||||
}
|
||||
interface normalCall {
|
||||
(call: Function): void;
|
||||
}
|
||||
export const beforeEach: callWithNext;
|
||||
export const afterEach: callWithoutNext;
|
||||
export const onError: callWithoutNext;
|
||||
export const afterNotNext: normalCall;
|
||||
interface uniCrazyRouter {
|
||||
beforeEach: callWithNext;
|
||||
afterEach: callWithoutNext;
|
||||
onError: callWithoutNext;
|
||||
afterNotNext: normalCall;
|
||||
install: any;
|
||||
}
|
||||
declare const uniCrazyRouter: uniCrazyRouter;
|
||||
export default uniCrazyRouter;
|
||||
// for Vue2
|
||||
declare module "vue/types/vue" {
|
||||
interface Vue {
|
||||
$routeParams?: object | null;
|
||||
$passedParams?: object | null;
|
||||
}
|
||||
}
|
||||
|
||||
// for Vue3
|
||||
declare module '@vue/runtime-core' {
|
||||
interface ComponentCustomProperties {
|
||||
$routeParams?: object | null;
|
||||
$passedParams?: object | null;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,14 @@
|
||||
.search-btn {
|
||||
// margin-top: 15px;
|
||||
// margin-left: 20px;
|
||||
// margin-bottom: 15px;
|
||||
// margin-left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
}
|
||||
|
||||
// 隐藏canvas
|
||||
uni-canvas {
|
||||
// position: absolute;
|
||||
// top: -1000px;
|
||||
// left: -1000px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,90 @@
|
||||
import katex from "katex";
|
||||
import splitAtDelimiters from "./splitAtDelimiters";
|
||||
|
||||
const renderMathInText = function(text, optionsCopy) {
|
||||
const data = splitAtDelimiters(text, optionsCopy.delimiters);
|
||||
if (data.length === 1 && data[0].type === 'text') {
|
||||
// There is no formula in the text.
|
||||
// Let's return null which means there is no need to replace
|
||||
// the current text node with a new one.
|
||||
return data[0].data;
|
||||
}
|
||||
|
||||
let html = ''
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].type === "text") {
|
||||
html += data[i].data;
|
||||
} else {
|
||||
let math = data[i].data;
|
||||
// Override any display mode defined in the settings with that
|
||||
// defined by the text itself
|
||||
optionsCopy.displayMode = data[i].display;
|
||||
try {
|
||||
if (optionsCopy.preProcess) {
|
||||
math = optionsCopy.preProcess(math);
|
||||
}
|
||||
html += katex.renderToString(math, optionsCopy);
|
||||
} catch (e) {
|
||||
if (!(e instanceof katex.ParseError)) {
|
||||
throw e;
|
||||
}
|
||||
optionsCopy.errorCallback(
|
||||
"KaTeX auto-render: Failed to parse `" + data[i].data +
|
||||
"` with ",
|
||||
e
|
||||
);
|
||||
html += data[i].rawData;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
const renderMath = function(text, options) {
|
||||
if (!text) {
|
||||
throw new Error("No text provided to render");
|
||||
}
|
||||
|
||||
const optionsCopy = {};
|
||||
|
||||
// Object.assign(optionsCopy, option)
|
||||
for (const option in options) {
|
||||
if (options.hasOwnProperty(option)) {
|
||||
optionsCopy[option] = options[option];
|
||||
}
|
||||
}
|
||||
|
||||
// default options
|
||||
optionsCopy.delimiters = optionsCopy.delimiters || [
|
||||
{left: "$$", right: "$$", display: true},
|
||||
{left: "\\(", right: "\\)", display: false},
|
||||
// LaTeX uses $…$, but it ruins the display of normal `$` in text:
|
||||
{left: "$", right: "$", display: false},
|
||||
// $ must come after $$
|
||||
|
||||
// Render AMS environments even if outside $$…$$ delimiters.
|
||||
{left: "\\begin{equation}", right: "\\end{equation}", display: true},
|
||||
{left: "\\begin{align}", right: "\\end{align}", display: true},
|
||||
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
|
||||
{left: "\\begin{gather}", right: "\\end{gather}", display: true},
|
||||
{left: "\\begin{CD}", right: "\\end{CD}", display: true},
|
||||
|
||||
{left: "\\[", right: "\\]", display: true},
|
||||
];
|
||||
optionsCopy.ignoredTags = optionsCopy.ignoredTags || [
|
||||
"script", "noscript", "style", "textarea", "pre", "code", "option",
|
||||
];
|
||||
optionsCopy.ignoredClasses = optionsCopy.ignoredClasses || [];
|
||||
optionsCopy.errorCallback = optionsCopy.errorCallback || console.error;
|
||||
|
||||
// Enable sharing of global macros defined via `\gdef` between different
|
||||
// math elements within a single call to `renderMathInElement`.
|
||||
optionsCopy.macros = optionsCopy.macros || {};
|
||||
|
||||
return renderMathInText(text, optionsCopy);
|
||||
};
|
||||
|
||||
export default renderMath;
|
||||
@ -0,0 +1,85 @@
|
||||
/* eslint no-constant-condition:0 */
|
||||
const findEndOfMath = function(delimiter, text, startIndex) {
|
||||
// Adapted from
|
||||
// https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
|
||||
let index = startIndex;
|
||||
let braceLevel = 0;
|
||||
|
||||
const delimLength = delimiter.length;
|
||||
|
||||
while (index < text.length) {
|
||||
const character = text[index];
|
||||
|
||||
if (braceLevel <= 0 &&
|
||||
text.slice(index, index + delimLength) === delimiter) {
|
||||
return index;
|
||||
} else if (character === "\\") {
|
||||
index++;
|
||||
} else if (character === "{") {
|
||||
braceLevel++;
|
||||
} else if (character === "}") {
|
||||
braceLevel--;
|
||||
}
|
||||
|
||||
index++;
|
||||
}
|
||||
|
||||
return -1;
|
||||
};
|
||||
|
||||
const escapeRegex = function(string) {
|
||||
return string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
|
||||
};
|
||||
|
||||
const amsRegex = /^\\begin{/;
|
||||
|
||||
const splitAtDelimiters = function(text, delimiters) {
|
||||
let index;
|
||||
const data = [];
|
||||
|
||||
const regexLeft = new RegExp(
|
||||
"(" + delimiters.map((x) => escapeRegex(x.left)).join("|") + ")"
|
||||
);
|
||||
|
||||
while (true) {
|
||||
index = text.search(regexLeft);
|
||||
if (index === -1) {
|
||||
break;
|
||||
}
|
||||
if (index > 0) {
|
||||
data.push({
|
||||
type: "text",
|
||||
data: text.slice(0, index),
|
||||
});
|
||||
text = text.slice(index); // now text starts with delimiter
|
||||
}
|
||||
// ... so this always succeeds:
|
||||
const i = delimiters.findIndex((delim) => text.startsWith(delim.left));
|
||||
index = findEndOfMath(delimiters[i].right, text, delimiters[i].left.length);
|
||||
if (index === -1) {
|
||||
break;
|
||||
}
|
||||
const rawData = text.slice(0, index + delimiters[i].right.length);
|
||||
const math = amsRegex.test(rawData)
|
||||
? rawData
|
||||
: text.slice(delimiters[i].left.length, index);
|
||||
data.push({
|
||||
type: "math",
|
||||
data: math,
|
||||
rawData,
|
||||
display: delimiters[i].display,
|
||||
});
|
||||
text = text.slice(index + delimiters[i].right.length);
|
||||
}
|
||||
|
||||
if (text !== "") {
|
||||
data.push({
|
||||
type: "text",
|
||||
data: text,
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
export default splitAtDelimiters;
|
||||
@ -0,0 +1,9 @@
|
||||
export function createScript(src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = src;
|
||||
script.onload = () => resolve(script);
|
||||
script.onerror = () => reject(new Error(`Script load error for ${src}`));
|
||||
document.head.append(script);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue