@10yun/cv-mobile-ui 0.5.8 → 0.5.9

package/ui-cv/cv-markdown-show/cv-markdown-show.vue

@@ -0,0 +1,109 @@
+<!-- uniapp vue3 markdown解析 -->
+<template>
+  <view class="ua__markdown">
+    <rich-text space="nbsp" :nodes="parseNodes(source)" @itemclick="handleItemClick"></rich-text>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import MarkdownIt from './lib/markdown-it.min.js';
+import hljs from './lib/highlight/uni-highlight.min.js';
+import './lib/highlight/atom-one-dark.css';
+import parseHtml from './lib/html-parser.js';
+const props = defineProps({
+  // 解析内容
+  source: String,
+  showLine: { type: [Boolean, String], default: true }
+});
+
+let copyCodeData = [];
+const markdown = MarkdownIt({
+  html: true,
+  highlight: function (str, lang) {
+    let preCode = '';
+    try {
+      preCode = hljs.highlightAuto(str).value;
+    } catch (err) {
+      preCode = markdown.utils.escapeHtml(str);
+    }
+    const lines = preCode.split(/\n/).slice(0, -1);
+    // 添加自定义行号
+    let html = lines
+      .map((item, index) => {
+        if (item == '') {
+          return '';
+        }
+        return '<li><span class="line-num" data-line="' + (index + 1) + '"></span>' + item + '</li>';
+      })
+      .join('');
+    if (props.showLine) {
+      html = '<ol style="padding: 0px 30px;">' + html + '</ol>';
+    } else {
+      html = '<ol style="padding: 0px 7px;list-style:none;">' + html + '</ol>';
+    }
+    copyCodeData.push(str);
+    let htmlCode = `<div class="markdown-wrap">`;
+    // #ifndef MP-WEIXIN
+    htmlCode += `<div style="color: #aaa;text-align: right;font-size: 12px;padding:8px;">`;
+    htmlCode += `${lang}<a class="copy-btn" code-data-index="${copyCodeData.length - 1}" style="margin-left: 8px;">复制代码</a>`;
+    htmlCode += `</div>`;
+    // #endif
+    htmlCode += `<pre class="hljs" style="padding:10px 8px 0;margin-bottom:5px;overflow: auto;display: block;border-radius: 5px;"><code>${html}</code></pre>`;
+    htmlCode += '</div>';
+    return htmlCode;
+  }
+});
+const parseNodes = (value) => {
+  if (!value) return;
+  // 解析<br />到\n
+  value = value.replace(/<br>|<br\/>|<br \/>/g, '\n');
+  value = value.replace(/&nbsp;/g, ' ');
+  let htmlString = '';
+  if (value.split('```').length % 2) {
+    let mdtext = value;
+    if (mdtext[mdtext.length - 1] != '\n') {
+      mdtext += '\n';
+    }
+    htmlString = markdown.render(mdtext);
+  } else {
+    htmlString = markdown.render(value);
+  }
+  // 解决小程序表格边框型失效问题
+  htmlString = htmlString.replace(/<table/g, `<table class="table"`);
+  htmlString = htmlString.replace(/<tr/g, `<tr class="tr"`);
+  htmlString = htmlString.replace(/<th>/g, `<th class="th">`);
+  htmlString = htmlString.replace(/<td/g, `<td class="td"`);
+  htmlString = htmlString.replace(/<hr>|<hr\/>|<hr \/>/g, `<hr class="hr">`);
+
+  // #ifndef APP-NVUE
+  return htmlString;
+  // #endif
+
+  // 将htmlString转成htmlArray，反之使用rich-text解析
+  // #ifdef APP-NVUE
+  return parseHtml(htmlString);
+  // #endif
+};
+
+// 复制代码
+const handleItemClick = (e) => {
+  let { attrs } = e.detail.node;
+  let { 'code-data-index': codeDataIndex, class: className } = attrs;
+  if (className == 'copy-btn') {
+    uni.setClipboardData({
+      data: copyCodeData[codeDataIndex],
+      showToast: false,
+      success() {
+        uni.showToast({
+          title: '复制成功',
+          icon: 'none'
+        });
+      }
+    });
+  }
+};
+</script>
+<style scoped>
+@import url('./markdown.css');
+</style>

package/ui-cv/cv-markdown-show/lib/highlight/atom-one-dark.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

package/ui-cv/cv-markdown-show/lib/highlight/atom-one-light.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

package/ui-cv/cv-markdown-show/lib/highlight/github-dark.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}