实习随笔【实现Json格式化与latex渲染】

于 2024-07-17 07:45:00 发布
阅读量673 收藏 19
点赞数 30
分类专栏： 实习 文章标签： json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61791370/article/details/140458814
版权

【写在前面】在实习中，遇到了如下需求：

        待格式化数据大概长这样，里面存在Json乱码以及由$$包裹的公式

        目标格式： 

 一、Json格式化

我们这里的任务主要分为两部分：

  1. 解析一个可能包含嵌套的 JSON 字符串
  2. 格式化 JSON 对象

因为我们不知道后端返回的数据嵌套了多少层，所以均采用递归的方式，具体代码如下：

1、解析一个可能包含嵌套的 JSON 字符串
      parseAndFormatNestedJson(jsonString) {
        const recursiveParse = jsonStr => {
          try {
            let parsedData = JSON.parse(jsonStr);
            
            if (typeof parsedData === 'string') {
              return recursiveParse(parsedData);
            }
            
            for (let key in parsedData) {
              if (typeof parsedData[key] === 'string') {
                try {
                  parsedData[key] = recursiveParse(parsedData[key]);
                } catch (e) {
                  // 保留原始字符串
                }
              }
            }
            return parsedData;
          } catch (e) {
            return jsonStr;
          }
        };
  
        const parsedResult = recursiveParse(jsonString);
        return this.formatJson(parsedResult).replace(/\$\$/g, '$').replace(/\\\\/g, '\\');
      },

        这个函数的目的是解析一个可能包含嵌套的 JSON 字符串，并调用 formatJson 函数来格式化解析后的对象。处理过程如下：

  • 递归解析 (recursiveParse): 这是一个内部函数，使用递归来处理嵌套的 JSON 字符串。

    • 使用 JSON.parse 尝试解析输入的字符串 jsonStr。
    • 如果解析后的结果是字符串类型，表示可能是嵌套的 JSON 字符串，因此再次调用 recursiveParse 来解析这个字符串。
    • 如果结果是一个对象，遍历该对象的每个属性。如果属性值是字符串类型，尝试对这个字符串进行递归解析。
    • 如果在解析过程中遇到异常（比如非法的 JSON 格式），会捕获异常并返回原始字符串。

  • 格式化和替换: 解析完成后的 JSON 对象通过 formatJson 进行格式化。格式化完成后，使用字符串替换来处理特殊字符，如将 $$ 替换为 $（方便展示），将 \\\\ 替换为 \\（处理异常）

2、格式化 JSON 对象
      formatJson(obj, level = 0) {
        const spaces = '  '.repeat(level);
        if (typeof obj !== 'object' || obj === null) {
          return JSON.stringify(obj);
        }
        
        if (Array.isArray(obj)) {
          const items = obj.map(item => `\n${spaces}  ${this.formatJson(item, level + 1)}`);
          return `[${items.join(', ')}\n${spaces}]`;
        } else {
          const entries = Object.entries(obj).map(([key, value]) => 
            `\n${spaces}  "${key}": ${this.formatJson(value, level + 1)}`
          );
          return `{${entries.join(', ')}\n${spaces}}`;
        }
      }

这个函数用于格式化 JSON 对象，使其更易于阅读。它支持递归格式化对象和数组。

  • 基础情况: 如果输入不是对象（包括数组），或者为 null，直接使用 JSON.stringify 来转换为字符串。
  • 数组处理: 如果是数组，对每个元素递归调用 formatJson 并增加缩进，然后将结果拼接成完整的数组格式。
  • 对象处理: 如果是对象，对每个键值对递归调用 formatJson 并增加缩进，然后将结果拼接成完整的对象格式。

二、渲染latex公式

    这里涉及到 第三方库 Mathjax 的使用，Mathjax具有强大的功能，配置好latex的规则后，可以自动识别 $$ / $ 包裹的公式，并将公式优雅的呈现在页面上。

1、引入并配置

        我这里使用的 cdn 引入的方式，在vue项目的 index.html 中 <head> 下配置

<!-- 配置 MathJax -->
    <script>
      window.MathJax = {
        tex: {
          inlineMath: [['$', '$'], ['\\(', '\\)']],
          displayMath: [['$$', '$$'], ['\\[', '\\]']]
        },
        svg: {
          fontCache: 'global'
        }
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
2、组件中使用
<template>
    <div>
      <div id="json-container">{{ formattedJson }}</div>
      <!-- <div id="json-container">{{ this.parseAndFormatNestedJson(this.jsonString) }}</div> -->
    </div>
  </template>



 mounted() {
    this.$nextTick(() => {
    MathJax.typeset();
 });
3、配置样式

        配置到这里，你会发现页面上的公式正常渲染了，但是字符串的格式却乱了，所以需要加一些样式，代码如下：

#json-container {
        font-family: monospace;
        white-space: pre-wrap;
    }

        至此，整个Json格式化与渲染就完成了，希望对做同样需求的你，能够有所帮助，附上完整代码。

  • 配置文件 index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 配置 MathJax -->
    <script>
      window.MathJax = {
        tex: {
          inlineMath: [['$', '$'], ['\\(', '\\)']],
          displayMath: [['$$', '$$'], ['\\[', '\\]']]
        },
        svg: {
          fontCache: 'global'
        }
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  • 组件文件 Mathjax.vue
<template>
    <div>
      <div id="json-container">{{ formattedJson }}</div>
      <!-- <div id="json-container">{{ this.parseAndFormatNestedJson(this.jsonString) }}</div> -->
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'JsonFormatter',
    data() {
      return {
        jsonString: "{\"msg\":\"ok\",\"code\":20000,\"data\":{\"result\":[{\"probs\":0.99942553043365479,\"texts\":\"如图,菱形ABCD的边长为4,且A\",\"char_info\":[{\"pos\":[{\"x\":0,\"y\":33},{\"x\":22,\"y\":33},{\"x\":22,\"y\":60},{\"x\":0,\"y\":60}],\"char\":\"如\",\"type\":1},{\"pos\":[{\"x\":22,\"y\":33},{\"x\":43,\"y\":33},{\"x\":43,\"y\":60},{\"x\":22,\"y\":60}],\"char\":\"图\",\"type\":1},{\"pos\":[{\"x\":43,\"y\":33},{\"x\":68,\"y\":33},{\"x\":68,\"y\":60},{\"x\":43,\"y\":60}],\"char\":\",\",\"type\":1},{\"pos\":[{\"x\":68,\"y\":33},{\"x\":95,\"y\":33},{\"x\":95,\"y\":60},{\"x\":68,\"y\":60}],\"char\":\"菱\",\"type\":1},{\"pos\":[{\"x\":95,\"y\":33},{\"x\":118,\"y\":33},{\"x\":118,\"y\":60},{\"x\":95,\"y\":60}],\"char\":\"形\",\"type\":1},{\"pos\":[{\"x\":118,\"y\":33},{\"x\":140,\"y\":33},{\"x\":140,\"y\":60},{\"x\":118,\"y\":60}],\"char\":\"A\",\"type\":1},{\"pos\":[{\"x\":140,\"y\":33},{\"x\":157,\"y\":33},{\"x\":157,\"y\":60},{\"x\":140,\"y\":60}],\"char\":\"B\",\"type\":1},{\"pos\":[{\"x\":157,\"y\":33},{\"x\":174,\"y\":33},{\"x\":174,\"y\":60},{\"x\":157,\"y\":60}],\"char\":\"C\",\"type\":1},{\"pos\":[{\"x\":174,\"y\":33},{\"x\":194,\"y\":33},{\"x\":194,\"y\":60},{\"x\":174,\"y\":60}],\"char\":\"D\",\"type\":1},{\"pos\":[{\"x\":194,\"y\":33},{\"x\":216,\"y\":33},{\"x\":216,\"y\":60},{\"x\":194,\"y\":60}],\"char\":\"的\",\"type\":1},{\"pos\":[{\"x\":216,\"y\":33},{\"x\":240,\"y\":33},{\"x\":240,\"y\":60},{\"x\":216,\"y\":60}],\"char\":\"边\",\"type\":1},{\"pos\":[{\"x\":240,\"y\":33},{\"x\":263,\"y\":33},{\"x\":263,\"y\":60},{\"x\":240,\"y\":60}],\"char\":\"长\",\"type\":1},{\"pos\":[{\"x\":263,\"y\":33},{\"x\":285,\"y\":33},{\"x\":285,\"y\":60},{\"x\":263,\"y\":60}],\"char\":\"为\",\"type\":1},{\"pos\":[{\"x\":285,\"y\":33},{\"x\":301,\"y\":33},{\"x\":301,\"y\":60},{\"x\":285,\"y\":60}],\"char\":\"4\",\"type\":1},{\"pos\":[{\"x\":301,\"y\":33},{\"x\":321,\"y\":33},{\"x\":321,\"y\":60},{\"x\":301,\"y\":60}],\"char\":\",\",\"type\":1},{\"pos\":[{\"x\":321,\"y\":33},{\"x\":348,\"y\":33},{\"x\":348,\"y\":60},{\"x\":321,\"y\":60}],\"char\":\"且\",\"type\":1},{\"pos\":[{\"x\":348,\"y\":33},{\"x\":375,\"y\":33},{\"x\":375,\"y\":60},{\"x\":348,\"y\":60}],\"char\":\"A\",\"type\":1}],\"variance\":0.0010391805553808808,\"poses\":[{\"x\":0,\"y\":33},{\"x\":375,\"y\":33},{\"x\":375,\"y\":60},{\"x\":0,\"y\":60}]},{\"probs\":0.98136389255523682,\"texts\":\"$$  E \\\\bot B C $$于E,$$  A F \\\\bot C D $$于F,$$  \\\\angle B = 6 $$\",\"char_info\":[{\"pos\":[{\"x\":73,\"y\":69},{\"x\":96,\"y\":69},{\"x\":96,\"y\":96},{\"x\":73,\"y\":96}],\"char\":\"于\",\"type\":1},{\"pos\":[{\"x\":96,\"y\":69},{\"x\":115,\"y\":69},{\"x\":115,\"y\":96},{\"x\":96,\"y\":96}],\"char\":\"E\",\"type\":1},{\"pos\":[{\"x\":115,\"y\":69},{\"x\":125,\"y\":69},{\"x\":125,\"y\":96},{\"x\":115,\"y\":96}],\"char\":\",\",\"type\":1},{\"pos\":[{\"x\":231,\"y\":70},{\"x\":252,\"y\":70},{\"x\":252,\"y\":96},{\"x\":231,\"y\":96}],\"char\":\"于\",\"type\":1},{\"pos\":[{\"x\":252,\"y\":70},{\"x\":269,\"y\":70},{\"x\":269,\"y\":96},{\"x\":252,\"y\":96}],\"char\":\"F\",\"type\":1},{\"pos\":[{\"x\":269,\"y\":70},{\"x\":279,\"y\":70},{\"x\":279,\"y\":96},{\"x\":269,\"y\":96}],\"char\":\",\",\"type\":1}],\"variance\":0.048195969313383102,\"poses\":[{\"x\":0,\"y\":70},{\"x\":373,\"y\":69},{\"x\":373,\"y\":94},{\"x\":0,\"y\":94}]},{\"probs\":0.99968928098678589,\"texts\":\"$$  0 ^ { \\\\circ } $$,则菱形ABCD的面积\",\"char_info\":[{\"pos\":[{\"x\":0,\"y\":104},{\"x\":41,\"y\":104},{\"x\":41,\"y\":133},{\"x\":0,\"y\":133}],\"char\":\",\",\"type\":1},{\"pos\":[{\"x\":41,\"y\":104},{\"x\":69,\"y\":104},{\"x\":69,\"y\":133},{\"x\":41,\"y\":133}],\"char\":\"则\",\"type\":1},{\"pos\":[{\"x\":69,\"y\":104},{\"x\":93,\"y\":104},{\"x\":93,\"y\":133},{\"x\":69,\"y\":133}],\"char\":\"菱\",\"type\":1},{\"pos\":[{\"x\":93,\"y\":104},{\"x\":117,\"y\":104},{\"x\":117,\"y\":133},{\"x\":93,\"y\":133}],\"char\":\"形\",\"type\":1},{\"pos\":[{\"x\":117,\"y\":104},{\"x\":139,\"y\":104},{\"x\":139,\"y\":133},{\"x\":117,\"y\":133}],\"char\":\"A\",\"type\":1},{\"pos\":[{\"x\":139,\"y\":104},{\"x\":157,\"y\":104},{\"x\":157,\"y\":133},{\"x\":139,\"y\":133}],\"char\":\"B\",\"type\":1},{\"pos\":[{\"x\":157,\"y\":104},{\"x\":173,\"y\":104},{\"x\":173,\"y\":133},{\"x\":157,\"y\":133}],\"char\":\"C\",\"type\":1},{\"pos\":[{\"x\":173,\"y\":104},{\"x\":192,\"y\":104},{\"x\":192,\"y\":133},{\"x\":173,\"y\":133}],\"char\":\"D\",\"type\":1},{\"pos\":[{\"x\":192,\"y\":104},{\"x\":215,\"y\":104},{\"x\":215,\"y\":133},{\"x\":192,\"y\":133}],\"char\":\"的\",\"type\":1},{\"pos\":[{\"x\":215,\"y\":104},{\"x\":239,\"y\":104},{\"x\":239,\"y\":133},{\"x\":215,\"y\":133}],\"char\":\"面\",\"type\":1},{\"pos\":[{\"x\":239,\"y\":104},{\"x\":269,\"y\":104},{\"x\":269,\"y\":133},{\"x\":239,\"y\":133}],\"char\":\"积\",\"type\":1}],\"variance\":0.00050142116378992796,\"poses\":[{\"x\":0,\"y\":104},{\"x\":269,\"y\":104},{\"x\":269,\"y\":133},{\"x\":0,\"y\":133}]},{\"probs\":0.92363280057907104,\"texts\":\"为___.\",\"char_info\":[{\"pos\":[{\"x\":0,\"y\":141},{\"x\":25,\"y\":141},{\"x\":25,\"y\":171},{\"x\":0,\"y\":171}],\"char\":\"为\",\"type\":1},{\"pos\":[{\"x\":25,\"y\":141},{\"x\":41,\"y\":141},{\"x\":41,\"y\":171},{\"x\":25,\"y\":171}],\"char\":\"_\",\"type\":1},{\"pos\":[{\"x\":41,\"y\":141},{\"x\":47,\"y\":141},{\"x\":47,\"y\":171},{\"x\":41,\"y\":171}],\"char\":\"_\",\"type\":1},{\"pos\":[{\"x\":47,\"y\":141},{\"x\":87,\"y\":141},{\"x\":87,\"y\":171},{\"x\":47,\"y\":171}],\"char\":\"_\",\"type\":1},{\"pos\":[{\"x\":87,\"y\":141},{\"x\":132,\"y\":141},{\"x\":132,\"y\":171},{\"x\":87,\"y\":171}],\"char\":\".\",\"type\":1}],\"variance\":0.15443108975887299,\"poses\":[{\"x\":0,\"y\":141},{\"x\":132,\"y\":141},{\"x\":132,\"y\":171},{\"x\":0,\"y\":171}]},{\"probs\":0.998046875,\"texts\":\"A\",\"char_info\":[{\"pos\":[{\"x\":64,\"y\":171},{\"x\":87,\"y\":171},{\"x\":87,\"y\":186},{\"x\":64,\"y\":186}],\"char\":\"A\",\"type\":1}],\"variance\":0,\"poses\":[{\"x\":64,\"y\":171},{\"x\":87,\"y\":171},{\"x\":87,\"y\":186},{\"x\":64,\"y\":186}]},{\"probs\":0.99951171875,\"texts\":\"B D\",\"char_info\":[{\"pos\":[{\"x\":0,\"y\":216},{\"x\":11,\"y\":216},{\"x\":11,\"y\":232},{\"x\":0,\"y\":232}],\"char\":\"B\",\"type\":1},{\"pos\":[{\"x\":12,\"y\":216},{\"x\":143,\"y\":216},{\"x\":143,\"y\":232},{\"x\":12,\"y\":232}],\"char\":\" \",\"type\":1},{\"pos\":[{\"x\":144,\"y\":216},{\"x\":159,\"y\":216},{\"x\":159,\"y\":232},{\"x\":144,\"y\":232}],\"char\":\"D\",\"type\":1}],\"variance\":0,\"poses\":[{\"x\":0,\"y\":216},{\"x\":159,\"y\":216},{\"x\":159,\"y\":232},{\"x\":0,\"y\":232}]},{\"probs\":1,\"texts\":\"E F\",\"char_info\":[{\"pos\":[{\"x\":32,\"y\":243},{\"x\":45,\"y\":243},{\"x\":45,\"y\":259},{\"x\":32,\"y\":259}],\"char\":\"E\",\"type\":1},{\"pos\":[{\"x\":46,\"y\":243},{\"x\":107,\"y\":243},{\"x\":107,\"y\":259},{\"x\":46,\"y\":259}],\"char\":\" \",\"type\":1},{\"pos\":[{\"x\":108,\"y\":243},{\"x\":122,\"y\":243},{\"x\":122,\"y\":259},{\"x\":108,\"y\":259}],\"char\":\"F\",\"type\":1}],\"variance\":0,\"poses\":[{\"x\":32,\"y\":243},{\"x\":122,\"y\":243},{\"x\":122,\"y\":259},{\"x\":32,\"y\":259}]},{\"probs\":0.99853515625,\"texts\":\"C\",\"char_info\":[{\"pos\":[{\"x\":69,\"y\":261},{\"x\":94,\"y\":261},{\"x\":94,\"y\":277},{\"x\":69,\"y\":277}],\"char\":\"C\",\"type\":1}],\"variance\":0,\"poses\":[{\"x\":69,\"y\":261},{\"x\":94,\"y\":261},{\"x\":94,\"y\":277},{\"x\":69,\"y\":277}]}],\"rotate\":0,\"images\":[{\"poses\":[{\"x\":0,\"y\":168},{\"x\":167,\"y\":168},{\"x\":167,\"y\":279},{\"x\":0,\"y\":279}]}],\"single_box\":{\"print_text\":[{\"texts\":\"如图,菱形ABCD的边长为4,且A\",\"Confidence\":0.99942553043365479,\"stdofconfi\":0.0010391805553808808,\"poses\":[{\"x\":0,\"y\":33},{\"x\":375,\"y\":33},{\"x\":375,\"y\":60},{\"x\":0,\"y\":60}]},{\"texts\":\"$$  0 ^ { \\\\circ } $$,则菱形ABCD的面积\",\"Confidence\":0.99968928098678589,\"stdofconfi\":0.00050142116378992796,\"poses\":[{\"x\":0,\"y\":104},{\"x\":269,\"y\":104},{\"x\":269,\"y\":133},{\"x\":0,\"y\":133}]},{\"texts\":\"为___.\",\"Confidence\":0.92363280057907104,\"stdofconfi\":0.15443108975887299,\"poses\":[{\"x\":0,\"y\":141},{\"x\":132,\"y\":141},{\"x\":132,\"y\":171},{\"x\":0,\"y\":171}]},{\"texts\":\"D\",\"Confidence\":1,\"stdofconfi\":0,\"poses\":[{\"x\":144,\"y\":216},{\"x\":159,\"y\":216},{\"x\":159,\"y\":232},{\"x\":144,\"y\":232}]},{\"texts\":\"B\",\"Confidence\":0.99951171875,\"stdofconfi\":0,\"poses\":[{\"x\":0,\"y\":216},{\"x\":11,\"y\":216},{\"x\":11,\"y\":232},{\"x\":0,\"y\":232}]},{\"texts\":\"于E,\",\"Confidence\":0.99951171875,\"stdofconfi\":0.00048828125,\"poses\":[{\"x\":73,\"y\":69},{\"x\":125,\"y\":69},{\"x\":125,\"y\":96},{\"x\":73,\"y\":96}]},{\"texts\":\"于F,\",\"Confidence\":0.96321612596511841,\"stdofconfi\":0.047707688063383102,\"poses\":[{\"x\":231,\"y\":70},{\"x\":279,\"y\":70},{\"x\":279,\"y\":96},{\"x\":231,\"y\":96}]},{\"texts\":\"F\",\"Confidence\":0.99951171875,\"stdofconfi\":0,\"poses\":[{\"x\":108,\"y\":243},{\"x\":122,\"y\":243},{\"x\":122,\"y\":259},{\"x\":108,\"y\":259}]},{\"texts\":\"E\",\"Confidence\":1,\"stdofconfi\":0,\"poses\":[{\"x\":32,\"y\":243},{\"x\":45,\"y\":243},{\"x\":45,\"y\":259},{\"x\":32,\"y\":259}]},{\"texts\":\"A\",\"Confidence\":0.998046875,\"stdofconfi\":0,\"poses\":[{\"x\":64,\"y\":171},{\"x\":87,\"y\":171},{\"x\":87,\"y\":186},{\"x\":64,\"y\":186}]},{\"texts\":\"C\",\"Confidence\":0.99853515625,\"stdofconfi\":0,\"poses\":[{\"x\":69,\"y\":261},{\"x\":94,\"y\":261},{\"x\":94,\"y\":277},{\"x\":69,\"y\":277}]}],\"print_formula\":[{\"texts\":\"$$  E \\\\bot B C $$\",\"Confidence\":0.99000000953674316,\"stdofconfi\":0,\"poses\":[{\"x\":0,\"y\":70},{\"x\":74,\"y\":70},{\"x\":74,\"y\":94},{\"x\":0,\"y\":94}]},{\"texts\":\"$$  A F \\\\bot C D $$\",\"Confidence\":0.99000000953674316,\"stdofconfi\":0,\"poses\":[{\"x\":138,\"y\":70},{\"x\":233,\"y\":70},{\"x\":233,\"y\":93},{\"x\":138,\"y\":94}]},{\"texts\":\"$$  \\\\angle B = 6 $$\",\"Confidence\":0.99000000953674316,\"stdofconfi\":0,\"poses\":[{\"x\":293,\"y\":70},{\"x\":373,\"y\":69},{\"x\":373,\"y\":94},{\"x\":293,\"y\":94}]},{\"texts\":\"$$  0 ^ { \\\\circ } $$\",\"Confidence\":0.99000000953674316,\"stdofconfi\":0,\"poses\":[{\"x\":0,\"y\":107},{\"x\":21,\"y\":107},{\"x\":21,\"y\":128},{\"x\":0,\"y\":128}]}]}}}"
      };
    },
    computed: {
      formattedJson() {
        return this.parseAndFormatNestedJson(this.jsonString);
      }
    },
    methods: {
      parseAndFormatNestedJson(jsonString) {
        const recursiveParse = jsonStr => {
          try {
            let parsedData = JSON.parse(jsonStr);
            
            if (typeof parsedData === 'string') {
              return recursiveParse(parsedData);
            }
            
            for (let key in parsedData) {
              if (typeof parsedData[key] === 'string') {
                try {
                  parsedData[key] = recursiveParse(parsedData[key]);
                } catch (e) {
                  // 保留原始字符串
                }
              }
            }
            return parsedData;
          } catch (e) {
            return jsonStr;
          }
        };
  
        const parsedResult = recursiveParse(jsonString);
        return this.formatJson(parsedResult).replace(/\$\$/g, '$').replace(/\\\\/g, '\\');
      },
      formatJson(obj, level = 0) {
        const spaces = '  '.repeat(level);
        if (typeof obj !== 'object' || obj === null) {
          return JSON.stringify(obj);
        }
        
        if (Array.isArray(obj)) {
          const items = obj.map(item => `\n${spaces}  ${this.formatJson(item, level + 1)}`);
          return `[${items.join(', ')}\n${spaces}]`;
        } else {
          const entries = Object.entries(obj).map(([key, value]) => 
            `\n${spaces}  "${key}": ${this.formatJson(value, level + 1)}`
          );
          return `{${entries.join(', ')}\n${spaces}}`;
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        MathJax.typeset();
      });
    }
  };
  </script>
  
  <style scoped>
    #json-container {
        font-family: monospace;
        white-space: pre-wrap;
    }
  </style>

起风的秋天@
关注
  • 30
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
json_resume, JSON，生成漂亮的HTML，LaTeX，Markdown，以biodata进给作为输入.zip
09-18
json_resume, JSON，生成漂亮的HTML，LaTeX，Markdown，以biodata进给作为输入 JsonResumeJsonResume从一个JSON输入文件创建了漂亮的简历版本。 输出格式是专门针对现代简历模板定制的。 这里外，可以能有大量的自定义模板，使你自己的简历创建简单而超快。安装$ gem install js
自动化学报格式 Overleaf 在线使用 【2023最新教程】
10-26
自动化学报格式 Overleaf 在线使用 【2023最新教程】 教程链接：https://blog.csdn.net/weixin_43312117/article/details/134062800?spm=1001.2014.3001.5501 导入到 Overleaf，切换编译器：LuaLaTex 2023年10月...
LaTex+Vscode的json配置
余俊晖，NLP炼丹师，目前专注自然语言处理领域研究。曾获得国内外自然语言处理算法竞赛TOP奖项近二十项。
06-10 530
我的配置备份 vocode setting.json // ---------------------latext--------------------------------- "latex-workshop.latex.autoBuild.run": "never", "latex-workshop.showContextMenu": true, "latex-workshop.intellisense.package.enabled": true, "late
latex的json代码错误：预期为文件结尾
qq_39167959的博客
03-27 750
然而又出现错误，第一行提示：需要值jsonc(516)，比对后没有发现问题。问题描述：从网站复制代码粘贴到json里，但是显示有错误：预期为文件结尾。解决方案：换了一个网页选择其他相似代码进行复制，问题解决。原因之一是有未闭合的括号、引号或其他特殊字符。括号里面配置，代码复制到花括号里。
vscode中设置latex的json配置文件
a_piece_of_ppx的博客
04-14 4214
vscode中设置latex的json配置文件
latex+vscode一直报错，配置文件json和环境变脸配置
最新发布
Zm6Cc的博客
04-30 605
【代码】latex+vscode一直报错，配置文件json和环境变脸配置。
VS Code 第一次使用Latex参考文献出现问号且修改配置json文件也不管用
恩泽君的博客
11-07 1776
受不了overleaf 在线latex编辑经常掉线，因此尝试使用本地latex编辑，加之VS code具有较好的代码高亮和补全功能，因此非常适合我这种白嫖党，然而在第一使用中就受挫，出现了参考文献无法正常交叉引用，出现问号的情况，并由此带来了很多警告和错误。
办公自动化LaTex 基础课程3.3 标签与引
10-24
办公自动化LaTex 基础课程3.3 标签与引用
办公自动化LaTex 基础课程2.7.1 页面格式与fancyhdr-1.m
10-31
办公自动化LaTex 基础课程2.7.1 页面格式与fancyhdr-1.mp4
办公自动化LaTex 基础课程2.7.2 页面格式与fancyhdr-2.m
10-31
办公自动化LaTex 基础课程2.7.2 页面格式与fancyhdr-2.mp4
LaTex格式与tkinter的融合
01-07
使用matplotlib支持LaTex格式功能进行绘制公式，目前暂设计目标为开方函数。 pylatexenc支持字符串LaTex格式的转换，两者相结合，能输出更加理想的字符串结合。 同时matplotlib与tkinter的融合更加融洽。
LaTeX.js: 在浏览器中渲染LaTeX公式的新纪元
gitblog_00027的博客
04-13 1038
LaTeX.js: 在浏览器中渲染LaTeX公式的新纪元 LaTeX.jsJavaScript LaTeX to HTML5 translator项目地址:https://gitcode.com/gh_mirrors/la/LaTeX.js 在科学和工程领域，LaTeX是用于编写高质量数学公式的首选工具。然而，将这些公式集成到网页或在线应用中并不总是那么简单。这就是LaTeX.js项目的出现，它...
VsCode LaTeX 用户代码片段——效率++
一起加油~
03-22 1119
自定义一些常用的代码片段可以极大的提升写LaTeX的效率，结合VsCode使用，妥妥的效率神器。
Latex的一些技巧
Json_Nie的专栏
03-09 1865
今天介绍点latex的小细节 1 label example： 我们加入\begin{figure}[!htbp] \begin{center} \includegraphics[width = 0.4\textwidth]{wc.eps} \end{center} \caption{Performance comparison of venue prediction wit
LaTeX实战经验：如何插入程序代码
热门推荐
Liu-Cheng Xu
09-30 12万+
插入程序代码传统一点， \usepackage{listings}, 详情可以使用texdoc listings查看。\lstset{language=C} \begin{lstlisting} #include <iostream> using namespace std;int main() { cout<<"hello"<<endl; return 0; } \end{lstl
latex基本语法
justisme的博客
09-14 947
基本结构由导言区与正文区{document} 查看帮助文档 textdoc 包名 eg:texdoc booktab 单行注释用% 加载图片和表格都需要在相应的环境当中begin{figure}  end{figure} 公式都放入$ $之间，“$ $”  “$ $”中间会自动换行。--函数与上下标结合 document环境有且仅有一个。所有命令以“\”eg:\pi 章节：\secti...
Latex单栏并排插图
Json_Nie的专栏
10-24 6495
\begin{figure}[!htb] \begin{tabular}{cc} \begin{minipage}[t]{0.48\linewidth} \includegraphics[width = 1\linewidth]{Graph6.eps} \caption{This figure shows the performance of retrieval from diff
前端显示LaTex公式
weixin_44786238的博客
07-11 3004
前端显示LaTeX公式 Time：2021-06-27 前言 近来在学习神经网络，不少笔记中都使用了LaTeX进行公式的书写，考虑到准备把这些笔记也放到网站上方便日后来看，于是就整起了引入显示LaTeX公式的方法。 我的前端环境：VueCLI4.5 选择使用的是MathJax.js。 MathJax.js中文文档如下： MathJax 中文文档 — MathJax Chinese Doc 2.0 documentation (mathjax-chinese-doc.readthedocs.io) Autho
LaTeX入门——安装与配置TeX Live和VS Code
分享实用的上网冲浪技巧
08-06 1375
LaTeX和Markdown入门——安装与配置TeX Live和VS Code。 个人学习笔记，来源尽量标注，能力有限，仅供参考。
LaTeX段落格式与Simulink建模仿真解析
在Simulink建模与仿真的主题中，LaTeX的段落格式知识可能用于编写技术报告、实验手册或论文，以确保文档的格式规范和专业性。Simulink是MATLAB的一个扩展，用于系统级的模型建立和仿真，它广泛应用于工程、控制理论...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值