feat: 新增代码样式及复制功能

Yi.Bbs.Vue3/src/assets/highlightjs-line-numbers.js

@@ -0,0 +1,366 @@
+// jshint multistr:true
+
+(function (w, d) {
+    'use strict';
+
+    var TABLE_NAME = 'hljs-ln',
+        LINE_NAME = 'hljs-ln-line',
+        CODE_BLOCK_NAME = 'hljs-ln-code',
+        NUMBERS_BLOCK_NAME = 'hljs-ln-numbers',
+        NUMBER_LINE_NAME = 'hljs-ln-n',
+        DATA_ATTR_NAME = 'data-line-number',
+        BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
+
+    if (w.hljs) {
+        w.hljs.initLineNumbersOnLoad = initLineNumbersOnLoad;
+        w.hljs.lineNumbersBlock = lineNumbersBlock;
+        w.hljs.lineNumbersValue = lineNumbersValue;
+
+        addStyles();
+    } else {
+        w.console.error('highlight.js not detected!');
+    }
+
+    function isHljsLnCodeDescendant(domElt) {
+        var curElt = domElt;
+        while (curElt) {
+            if (curElt.className && curElt.className.indexOf('hljs-ln-code') !== -1) {
+                return true;
+            }
+            curElt = curElt.parentNode;
+        }
+        return false;
+    }
+
+    function getHljsLnTable(hljsLnDomElt) {
+        var curElt = hljsLnDomElt;
+        while (curElt.nodeName !== 'TABLE') {
+            curElt = curElt.parentNode;
+        }
+        return curElt;
+    }
+
+    // Function to workaround a copy issue with Microsoft Edge.
+    // Due to hljs-ln wrapping the lines of code inside a <table> element,
+    // itself wrapped inside a <pre> element, window.getSelection().toString()
+    // does not contain any line breaks. So we need to get them back using the
+    // rendered code in the DOM as reference.
+    function edgeGetSelectedCodeLines(selection) {
+        // current selected text without line breaks
+        var selectionText = selection.toString();
+
+        // get the <td> element wrapping the first line of selected code
+        var tdAnchor = selection.anchorNode;
+        while (tdAnchor.nodeName !== 'TD') {
+            tdAnchor = tdAnchor.parentNode;
+        }
+
+        // get the <td> element wrapping the last line of selected code
+        var tdFocus = selection.focusNode;
+        while (tdFocus.nodeName !== 'TD') {
+            tdFocus = tdFocus.parentNode;
+        }
+
+        // extract line numbers
+        var firstLineNumber = parseInt(tdAnchor.dataset.lineNumber);
+        var lastLineNumber = parseInt(tdFocus.dataset.lineNumber);
+
+        // multi-lines copied case
+        if (firstLineNumber != lastLineNumber) {
+
+            var firstLineText = tdAnchor.textContent;
+            var lastLineText = tdFocus.textContent;
+
+            // if the selection was made backward, swap values
+            if (firstLineNumber > lastLineNumber) {
+                var tmp = firstLineNumber;
+                firstLineNumber = lastLineNumber;
+                lastLineNumber = tmp;
+                tmp = firstLineText;
+                firstLineText = lastLineText;
+                lastLineText = tmp;
+            }
+
+            // discard not copied characters in first line
+            while (selectionText.indexOf(firstLineText) !== 0) {
+                firstLineText = firstLineText.slice(1);
+            }
+
+            // discard not copied characters in last line
+            while (selectionText.lastIndexOf(lastLineText) === -1) {
+                lastLineText = lastLineText.slice(0, -1);
+            }
+
+            // reconstruct and return the real copied text
+            var selectedText = firstLineText;
+            var hljsLnTable = getHljsLnTable(tdAnchor);
+            for (var i = firstLineNumber + 1 ; i < lastLineNumber ; ++i) {
+                var codeLineSel = format('.{0}[{1}="{2}"]', [CODE_BLOCK_NAME, DATA_ATTR_NAME, i]);
+                var codeLineElt = hljsLnTable.querySelector(codeLineSel);
+                selectedText += '\n' + codeLineElt.textContent;
+            }
+            selectedText += '\n' + lastLineText;
+            return selectedText;
+        // single copied line case
+        } else {
+            return selectionText;
+        }
+    }
+
+    // ensure consistent code copy/paste behavior across all browsers
+    // (see https://github.com/wcoder/highlightjs-line-numbers.js/issues/51)
+    document.addEventListener('copy', function(e) {
+        // get current selection
+        var selection = window.getSelection();
+        // override behavior when one wants to copy line of codes
+        if (isHljsLnCodeDescendant(selection.anchorNode)) {
+            var selectionText;
+            // workaround an issue with Microsoft Edge as copied line breaks
+            // are removed otherwise from the selection string
+            if (window.navigator.userAgent.indexOf('Edge') !== -1) {
+                selectionText = edgeGetSelectedCodeLines(selection);
+            } else {
+                // other browsers can directly use the selection string
+                selectionText = selection.toString();
+            }
+            e.clipboardData.setData('text/plain', selectionText);
+            e.preventDefault();
+        }
+    });
+
+    function addStyles () {
+        var css = d.createElement('style');
+        css.type = 'text/css';
+        css.innerHTML = format(
+            '.{0}{border-collapse:collapse}' +
+            '.{0} td{padding:0}' +
+            '.{1}:before{content:attr({2})}',
+        [
+            TABLE_NAME,
+            NUMBER_LINE_NAME,
+            DATA_ATTR_NAME
+        ]);
+        d.getElementsByTagName('head')[0].appendChild(css);
+    }
+
+    function initLineNumbersOnLoad (options) {
+        if (d.readyState === 'interactive' || d.readyState === 'complete') {
+            documentReady(options);
+        } else {
+            w.addEventListener('DOMContentLoaded', function () {
+                documentReady(options);
+            });
+        }
+    }
+
+    function documentReady (options) {
+        try {
+            var blocks = d.querySelectorAll('code.hljs,code.nohighlight');
+
+            for (var i in blocks) {
+                if (blocks.hasOwnProperty(i)) {
+                    if (!isPluginDisabledForBlock(blocks[i])) {
+                        lineNumbersBlock(blocks[i], options);
+                    }
+                }
+            }
+        } catch (e) {
+            w.console.error('LineNumbers error: ', e);
+        }
+    }
+
+    function isPluginDisabledForBlock(element) {
+        return element.classList.contains('nohljsln');
+    }
+
+    function lineNumbersBlock (element, options) {
+        if (typeof element !== 'object') return;
+
+        async(function () {
+            element.innerHTML = lineNumbersInternal(element, options);
+        });
+    }
+
+    function lineNumbersValue (value, options) {
+        if (typeof value !== 'string') return;
+
+        var element = document.createElement('code')
+        element.innerHTML = value
+
+        return lineNumbersInternal(element, options);
+    }
+
+    function lineNumbersInternal (element, options) {
+
+        var internalOptions = mapOptions(element, options);
+
+        duplicateMultilineNodes(element);
+
+        return addLineNumbersBlockFor(element.innerHTML, internalOptions);
+    }
+
+    function addLineNumbersBlockFor (inputHtml, options) {
+        var lines = getLines(inputHtml);
+
+        // if last line contains only carriage return remove it
+        if (lines[lines.length-1].trim() === '') {
+            lines.pop();
+        }
+
+        if (lines.length > 1 || options.singleLine) {
+            var html = '';
+
+            for (var i = 0, l = lines.length; i < l; i++) {
+                html += format(
+                    '<tr>' +
+                        '<td class="{0} {1}" {3}="{5}">' +
+                            '<div class="{2}" {3}="{5}"></div>' +
+                        '</td>' +
+                        '<td class="{0} {4}" {3}="{5}">' +
+                            '{6}' +
+                        '</td>' +
+                    '</tr>',
+                [
+                    LINE_NAME,
+                    NUMBERS_BLOCK_NAME,
+                    NUMBER_LINE_NAME,
+                    DATA_ATTR_NAME,
+                    CODE_BLOCK_NAME,
+                    i + options.startFrom,
+                    lines[i].length > 0 ? lines[i] : ' '
+                ]);
+            }
+
+            return format('<table class="{0}">{1}</table>', [ TABLE_NAME, html ]);
+        }
+
+        return inputHtml;
+    }
+
+    /**
+     * @param {HTMLElement} element Code block.
+     * @param {Object} options External API options.
+     * @returns {Object} Internal API options.
+     */
+    function mapOptions (element, options) {
+        options = options || {};
+        return {
+            singleLine: getSingleLineOption(options),
+            startFrom: getStartFromOption(element, options)
+        };
+    }
+
+    function getSingleLineOption (options) {
+        var defaultValue = false;
+        if (!!options.singleLine) {
+            return options.singleLine;
+        }
+        return defaultValue;
+    }
+
+    function getStartFromOption (element, options) {
+        var defaultValue = 1;
+        var startFrom = defaultValue;
+
+        if (isFinite(options.startFrom)) {
+            startFrom = options.startFrom;
+        }
+
+        // can be overridden because local option is priority
+        var value = getAttribute(element, 'data-ln-start-from');
+        if (value !== null) {
+            startFrom = toNumber(value, defaultValue);
+        }
+
+        return startFrom;
+    }
+
+    /**
+     * Recursive method for fix multi-line elements implementation in highlight.js
+     * Doing deep passage on child nodes.
+     * @param {HTMLElement} element
+     */
+    function duplicateMultilineNodes (element) {
+        var nodes = element.childNodes;
+        for (var node in nodes) {
+            if (nodes.hasOwnProperty(node)) {
+                var child = nodes[node];
+                if (getLinesCount(child.textContent) > 0) {
+                    if (child.childNodes.length > 0) {
+                        duplicateMultilineNodes(child);
+                    } else {
+                        duplicateMultilineNode(child.parentNode);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Method for fix multi-line elements implementation in highlight.js
+     * @param {HTMLElement} element
+     */
+    function duplicateMultilineNode (element) {
+        var className = element.className;
+
+        if ( ! /hljs-/.test(className)) return;
+
+        var lines = getLines(element.innerHTML);
+
+        for (var i = 0, result = ''; i < lines.length; i++) {
+            var lineText = lines[i].length > 0 ? lines[i] : ' ';
+            result += format('<span class="{0}">{1}</span>\n', [ className,  lineText ]);
+        }
+
+        element.innerHTML = result.trim();
+    }
+
+    function getLines (text) {
+        if (text.length === 0) return [];
+        return text.split(BREAK_LINE_REGEXP);
+    }
+
+    function getLinesCount (text) {
+        return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
+    }
+
+    ///
+    /// HELPERS
+    ///
+
+    function async (func) {
+        w.setTimeout(func, 0);
+    }
+
+    /**
+     * {@link https://wcoder.github.io/notes/string-format-for-string-formating-in-javascript}
+     * @param {string} format
+     * @param {array} args
+     */
+    function format (format, args) {
+        return format.replace(/\{(\d+)\}/g, function(m, n){
+            return args[n] !== undefined ? args[n] : m;
+        });
+    }
+
+    /**
+     * @param {HTMLElement} element Code block.
+     * @param {String} attrName Attribute name.
+     * @returns {String} Attribute value or empty.
+     */
+    function getAttribute (element, attrName) {
+        return element.hasAttribute(attrName) ? element.getAttribute(attrName) : null;
+    }
+
+    /**
+     * @param {String} str Source string.
+     * @param {Number} fallback Fallback value.
+     * @returns Parsed number or fallback value.
+     */
+    function toNumber (str, fallback) {
+        if (!str) return fallback;
+        var number = Number(str);
+        return isFinite(number) ? number : fallback;
+    }
+
+}(window, document));

Yi.Bbs.Vue3/src/components/ArticleContentInfo.vue

@@ -1,33 +1,69 @@
-<style scoped>
-::v-deep pre{
+<style scoped lang="scss">
+/*::v-dedp .markdown-body pre{
+    padding: 0 !important;
+}*/
+::v-deep  .pre-out
+{
+padding: 0;
+overflow-x: hidden;
+}
+::v-deep .pre {
     padding: 0;
     margin-bottom: 0;
-}
-::v-deep .header
-{
-    background-color: #409eff;
-    color: white;
-    height: 30px;
-    display: flex;
-    justify-content: flex-end;
-    padding-top: 10px;
-}
-::v-deep .code{
-padding: 0px 10px;
+    overflow-x: hidden;
+    .header {
+        background-color: #409eff;
+        color: white;
+        height: 30px;
+        display: flex;
+        justify-content: flex-end;
+        padding-top: 10px;
+
+
+        .language {}
+        .copy:hover {
+  cursor: pointer;
+}
+        .copy {
+            margin: 0px 10px;
+
+        }
+    }
+
+    .code-con {
+        display: flex;
+
+        .nav {
+            display: block;
+            background-color: #282C34;
+
+        }
+
+        .code {
+            display: block;
+            padding: 10px 10px;
+            font-size: 14px;
+            line-height: 22px;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+
+    }
 
-    font-size: 14px;
-    line-height: 22px;
-    border-radius: 4px;
 
 }
-::v-deep .language
-{
 
-}
-::v-deep .copy
-{
-margin: 0px 10px;
+::v-deep .nav-ul {
+    border-right: 1px solid #FFFFFF;
+    margin-top: 12px;
+    padding-left: 10px;
+    padding-right: 2px;
 
+    .nav-li {
+        margin: 5.3px 0;
+        text-align: right;
+        margin-right: 3px;
+    }
 }
 </style>
 <template>
@@ -43,38 +79,80 @@ import hljs from "highlight.js";
 //可以设置加载样式切换主题
 import '@/assets/atom-one-dark.css'
 import '@/assets/github-markdown.css'
-import { ref, watch } from 'vue';
-
+import {nextTick , ref, watch } from 'vue';
+const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
 
 
 const outputHtml = ref("")
 const props = defineProps(['code'])
-const codeHandler = (code,language) => {
+let codeCopyDic=[];
+const addCopyEvent=()=>{
+    const copySpans = document.querySelectorAll('.copy');
+console.log(copySpans,"copySpans");
+// 为每个 copy span 元素添加点击事件
+copySpans.forEach(span => {
+    
+  span.addEventListener('click', async function() {
+   await navigator.clipboard.writeText(codeCopyDic.filter(x=>x.id==span.id)[0].code );
+   ElMessage({
+          message: "代码块复制成功",
+          type: "success",
+          duration: 2000,
+        });
+  });
+});
+}
+
+//code部分处理、高亮
+const codeHandler = (code, language) => {
     const codeIndex = parseInt(Date.now() + "") + Math.floor(Math.random() * 10000000);
     // 格式化第一行是右侧language和 “复制” 按钮；
-
     if (code) {
+        const navCode = navHandler(code)
         try {
             // 使用 highlight.js 对代码进行高亮显示
-            const preCode =hljs.highlightAuto(code).value;
+            const preCode = hljs.highlightAuto(code).value;
             // 将代码包裹在 textarea 中，由于防止textarea渲染出现问题，这里将 "<" 用 "&lt;" 代替，不影响复制功能
-            let html = `<pre class='hljs'><div class="header"><span class="language">${language}</span><span class="copy">复制代码</span></div><code class="code">${preCode}</code></pre>`;
-
+            let html = `<pre  class='hljs pre'><div class="header"><span class="language">${language}</span><span class="copy" id="${codeIndex}">复制代码</span></div><div class="code-con"><div class="nav">${navCode}</div><code class="code">${preCode}</code></div></pre>`;
+            codeCopyDic.push({id: codeIndex,code:code});
+            console.log(codeCopyDic.length);
             return html;
-                      //<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${code.replace(/<\/textarea>/g, "&lt;/textarea>")}</textarea>
+            //<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${code.replace(/<\/textarea>/g, "&lt;/textarea>")}</textarea>
         } catch (error) {
             console.log(error);
         }
     }
 
 }
+//左侧导航栏处理
+const navHandler = (code) => {
+    //获取行数
+    var linesCount = getLinesCount(code);
+
+    var currentLine = 1;
+    var liHtml = ``;
+    while (linesCount + 1 >= currentLine) {
+        liHtml += `<li class="nav-li">${currentLine}</li>`
+        currentLine++
+    }
+
+    let html = `<ul class="nav-ul">${liHtml}</ul>`
+
+
+    return html;
+}
+
+const getLinesCount = (text) => {
+    return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
+}
 
 watch(props, (n, o) => {
+    codeCopyDic=[];
     marked.setOptions({
         renderer: new marked.Renderer(),
-        highlight: function (code,language) {
-           return codeHandler(code,language);
-           // return hljs.highlightAuto(code).value;
+        highlight: function (code, language) {
+            return codeHandler(code, language);
+            // return hljs.highlightAuto(code).value;
         },
         pedantic: false,
         gfm: true,//允许 Git Hub标准的markdown
@@ -89,8 +167,11 @@ watch(props, (n, o) => {
     }
     );
     //需要注意代码块样式
-    outputHtml.value = marked(n.code);
+   const soureHtml  = marked(n.code);
+    outputHtml.value= soureHtml.replace(/<pre>/g, '<pre class="pre-out">');
+        nextTick(()=>{
+            addCopyEvent();
+        }) 
 }, { immediate: true, deep: true })
-
 </script>