{"id":209698,"date":"2026-06-15T18:00:59","date_gmt":"2026-06-15T10:00:59","guid":{"rendered":"https:\/\/www.dongwubaike.cn\/fanhao\/?p=209698"},"modified":"2026-06-15T18:00:59","modified_gmt":"2026-06-15T10:00:59","slug":"%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81%e6%a0%bc%e5%bc%8f%e5%8c%96%e9%ab%98%e4%ba%ae%e5%b1%95%e7%a4%ba","status":"publish","type":"post","link":"https:\/\/www.dongwubaike.cn\/fanhao\/209698.html","title":{"rendered":"\u793a\u4f8b\u4ee3\u7801\u683c\u5f0f\u5316\u9ad8\u4eae\u5c55\u793a"},"content":{"rendered":"

\u6700\u8fd1\u5728\u5b9e\u73b0\u4e00\u4e2a\u6570\u636e\u770b\u677f\u7684\u6280\u672f\u9879\u76ee\uff0c\u9700\u8981\u5c06\u4ee3\u7801\u914d\u7f6e\u793a\u4f8b\u5c55\u793a\u51fa\u6765\uff0c\u5e76\u63d0\u4f9b\u590d\u5236\u529f\u80fd\u3002
\n\u590d\u5236\u529f\u80fd\u53ef\u4ee5\u4f7f\u7528\u00a0vue-clipboard2<\/code>\u00a0\/\u00a0vue3-clipboard<\/code>\u00a0\u63d2\u4ef6\u5b9e\u73b0\uff0c\u6bd4\u8f83\u7b80\u5355\u8fd9\u91cc\u4e0d\u63cf\u8ff0\uff0c\u4e3b\u8981\u8bb2\u8bb2\u9ad8\u4eae\u5c55\u793a\u548c\u683c\u5f0f\u5316\u95ee\u9898\u3002<\/p>\n

<\/a>\u4ee3\u7801\u9ad8\u4eae<\/h2>\n

\u4ee3\u7801\u9ad8\u4eae\u5c55\u793a\u53ef\u4ee5\u4f7f\u7528\u00a0highlight.js\u00a0\u63d2\u4ef6\u5b9e\u73b0\uff0c\u4ed4\u7ec6\u7ffb\u770b\u6587\u6863\u53ef\u4ee5\u53d1\u73b0\u5b98\u65b9\u6709\u5bf9 vue \u4e13\u95e8\u63d0\u4f9b\u4e00\u4e2a\u63d2\u4ef6\u00a0highlightjs\/vue-plugin\u00a0\u66f4\u65b9\u4fbf\u4f7f\u7528\u3002
\n\"\u793a\u4f8b\u4ee3\u7801\u683c\u5f0f\u5316\u9ad8\u4eae\u5c55\u793a\"<\/a><\/p>\n

\u6240\u4ee5\u8fd9\u8fb9\u5148\u5b89\u88c5\u8fd9\u4e24\u4e2a\u63d2\u4ef6<\/p>\n

yarn add highlight.js @highlightjs\/vue-plugin
\n<\/code><\/div>\n

\u5b8c\u6574\u4f7f\u7528\u65b9\u6cd5\u5982\u4e0b<\/p>\n

import<\/span> 'highlight.js\/lib\/common'<\/span>;
\nimport<\/span> 'highlight.js\/styles\/stackoverflow-light.css'<\/span>; \/\/ \u9ad8\u4eae\u6837\u5f0f<\/span>
\nimport<\/span> hljsVuePlugin from<\/span> '@highlightjs\/vue-plugin'<\/span>;
\nconst<\/span> highlightjs = hljsVuePlugin.component; \/\/ \u7ec4\u4ef6<\/span>
\n<\/code><\/div>\n
<highlightjs<\/span> v-if<\/span>=\"code\"<\/span> :code<\/span>=\"code\"<\/span>><\/span><\/highlightjs<\/span>><\/span>
\n<\/code><\/div>\n

\u4f46\u5b9e\u9645\u4e0a\u51fa\u6765\u7684\u6548\u679c\u5374\u662f\u6240\u6709\u4ee3\u7801\u90fd\u6324\u6210\u4e00\u884c
\n\"\u793a\u4f8b\u4ee3\u7801\u683c\u5f0f\u5316\u9ad8\u4eae\u5c55\u793a\"<\/a><\/p>\n

\u627e\u539f\u56e0\uff1a<\/strong><\/p>\n

1\u3001\u4e0a\u9762\u4f20\u8fdb\u53bb\u7684\u00a0code<\/code>\u00a0\u662f\u4ee3\u7801\u53d8\u91cf\u901a\u8fc7\u00a0JSON.stringify()<\/code>\u00a0\u8f6c\u6362\u7684\u5b57\u7b26\u4e32\u4ee3\u7801\uff0c\u653e\u5728\u6d4f\u89c8\u5668\u63a7\u5236\u53f0\u6267\u884c\u4e00\u4e0b\uff0c\u53d1\u73b0\u751f\u6210\u7684\u5c31\u662f\u4e00\u884c\u4ee3\u7801
\n\"\u793a\u4f8b\u4ee3\u7801\u683c\u5f0f\u5316\u9ad8\u4eae\u5c55\u793a\"<\/a><\/p>\n

2\u3001\u5982\u679c\u5c06\u5df2\u7ecf\u662f\u683c\u5f0f\u5316\u4ee3\u7801\u7684\u5b57\u7b26\u4e32\u4f20\u8fdb\u53bb\uff0c\u5c31\u6b63\u5e38<\/p>\n

const<\/span> code = `[
\n {
\n \"title\": \"apples\",
\n \"count\": [12000, 20000],
\n \"description\": {\"text\": \"...\", \"sensitive\": false}
\n },
\n {
\n \"title\": \"oranges\",
\n \"count\": [17500, null],
\n \"description\": {\"text\": \"...\", \"sensitive\": false}
\n }
\n]`<\/span>
\n<\/code><\/div>\n

\"\u793a\u4f8b\u4ee3\u7801\u683c\u5f0f\u5316\u9ad8\u4eae\u5c55\u793a\"<\/a><\/p>\n

\u5f97\u51fa\u7ed3\u8bba<\/strong>\uff1a\u8981\u5c55\u793a\u7684\u4ee3\u7801\u53d8\u91cf\u901a\u8fc7\u00a0JSON.stringify()<\/code>\u00a0\u751f\u6210\u5b57\u7b26\u4e32\u540e\uff0c\u8fd8\u8981\u518d\u8fdb\u884c\u4e00\u6b21\u683c\u5f0f\u5316\uff0c\u624d\u80fd\u6b63\u5e38\u5c55\u793a\u3002<\/p>\n

<\/a>\u683c\u5f0f\u5316\u4ee3\u7801<\/h2>\n

\u5728\u7ebf\u683c\u5f0f\u5316\u4ee3\u7801\u6709\u8fd9\u4e2a\u7f51\u7ad9\uff1abeautifier.io\uff0c\u4f7f\u7528\u4e86\u00a0js-beautify\u00a0\u63d2\u4ef6\u5b9e\u73b0\u3002\u62ff\u6765\u5427\u4f60~<\/p>\n

\u6587\u6863\u63cf\u8ff0\u53ef\u4ee5\u683c\u5f0f\u5316\u5982\u4e0b\u4ee3\u7801\uff0c\u591f\u7528\u4e86~<\/p>\n

\n

Beautify JavaScript, JSON, React.js, HTML, CSS, SCSS, and SASS<\/p>\n<\/blockquote>\n

\u4f7f\u7528\u6587\u6863\u91cc\u4e5f\u66b4\u9732\u4e86\u8fd9\u4e09\u4e2a\u65b9\u6cd5\uff1ajs_beautify<\/code>\u00a0css_beautify<\/code>\u00a0html_beautify<\/code>
\n\"\u793a\u4f8b\u4ee3\u7801\u683c\u5f0f\u5316\u9ad8\u4eae\u5c55\u793a\"<\/a><\/p>\n

\u7ed3\u5408\u00a0highlight<\/code>\uff0c\u5177\u4f53\u7528\u6cd5\u5982\u4e0b<\/p>\n

import<\/span> 'highlight.js\/lib\/common'<\/span>;
\nimport<\/span> 'highlight.js\/styles\/stackoverflow-light.css'<\/span>;
\nimport<\/span> hljsVuePlugin from<\/span> '@highlightjs\/vue-plugin'<\/span>;
\nimport<\/span> { js_beautify } from<\/span> 'js-beautify'<\/span>;
\nconst<\/span> highlightjs = hljsVuePlugin.component;<\/p>\n

const<\/span> codeFormat = js_beautify(props.code, {
\n indent_size<\/span>: 2<\/span>,
\n space_in_empty_paren<\/span>: true<\/span>,
\n});\n<\/p>\n

<\/code><\/div>\n

<highlightjs<\/span> v-if<\/span>=\"code\"<\/span> :code<\/span>=\"codeFormat\"<\/span>><\/span><\/highlightjs<\/span>><\/span>
\n<\/code><\/div>\n
\n

\u4e0a\u9762\u7684\u00a0js_beautify<\/code>\u00a0\u7b2c\u4e8c\u4e2a\u53c2\u6570\u652f\u6301\u66f4\u591a\u9009\u9879\uff1a<\/p>\n

{
\n \"indent_size\"<\/span>: 4<\/span>,
\n \"indent_char\"<\/span>: \" \"<\/span>,
\n \"indent_with_tabs\"<\/span>: false<\/span>,
\n \"editorconfig\"<\/span>: false<\/span>,
\n \"eol\"<\/span>: \"\\n\"<\/span>,
\n \"end_with_newline\"<\/span>: false<\/span>,
\n \"indent_level\"<\/span>: 0<\/span>,
\n \"preserve_newlines\"<\/span>: true<\/span>,
\n \"max_preserve_newlines\"<\/span>: 10<\/span>,
\n \"space_in_paren\"<\/span>: false<\/span>,
\n \"space_in_empty_paren\"<\/span>: false<\/span>,
\n \"jslint_happy\"<\/span>: false<\/span>,
\n \"space_after_anon_function\"<\/span>: false<\/span>,
\n \"space_after_named_function\"<\/span>: false<\/span>,
\n \"brace_style\"<\/span>: \"collapse\"<\/span>,
\n \"unindent_chained_methods\"<\/span>: false<\/span>,
\n \"break_chained_methods\"<\/span>: false<\/span>,
\n \"keep_array_indentation\"<\/span>: false<\/span>,
\n \"unescape_strings\"<\/span>: false<\/span>,
\n \"wrap_line_length\"<\/span>: 0<\/span>,
\n \"e4x\"<\/span>: false<\/span>,
\n \"comma_first\"<\/span>: false<\/span>,
\n \"operator_position\"<\/span>: \"before-newline\"<\/span>,
\n \"indent_empty_lines\"<\/span>: false<\/span>,
\n \"templating\"<\/span>: [\"auto\"<\/span>]
\n}
\n<\/code><\/div>\n

\u53ef\u6839\u636e\u9700\u8981\u4f7f\u7528\uff0c\u4e00\u822c\u4f1a\u8bbe\u7f6e\u4ee3\u7801\u7f29\u8fdb\u4e24\u4e2a\u5b57\u7b26\u00a0indent_size: 2<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

\u6700\u8fd1\u5728\u5b9e\u73b0\u4e00\u4e2a\u6570\u636e\u770b\u677f\u7684\u6280\u672f\u9879\u76ee\uff0c\u9700\u8981\u5c06\u4ee3\u7801\u914d\u7f6e\u793a\u4f8b\u5c55\u793a\u51fa\u6765\uff0c\u5e76\u63d0\u4f9b\u590d\u5236\u529f\u80fd\u3002 \u590d\u5236\u529f\u80fd\u53ef\u4ee5\u4f7f\u7528\u00a0vue-clipboard2\u00a0\/\u00a0vue3-clipboard\u00a0\u63d2\u4ef6\u5b9e\u73b0\uff0c\u6bd4\u8f83\u7b80\u5355\u8fd9\u91cc\u4e0d\u63cf\u8ff0\uff0c\u4e3b\u8981\u8bb2\u8bb2\u9ad8\u4eae\u5c55\u793a\u548c\u683c\u5f0f\u5316\u95ee\u9898\u3002 \u4ee3\u7801\u9ad8\u4eae \u4ee3\u7801\u9ad8 […]<\/p>\n","protected":false},"author":1,"featured_media":209699,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-209698","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/posts\/209698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/comments?post=209698"}],"version-history":[{"count":0,"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/posts\/209698\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/media\/209699"}],"wp:attachment":[{"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/media?parent=209698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/categories?post=209698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dongwubaike.cn\/fanhao\/wp-json\/wp\/v2\/tags?post=209698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\"\u793a\u4f8b\u4ee3\u7801\u683c\u5f0f\u5316\u9ad8\u4eae\u5c55\u793a\"<\/a>
\n\u53ef\u4ee5\u53d1\u73b0\u793a\u4f8b\u4ee3\u7801\u5df2\u7ecf\u683c\u5f0f\u5316\u9ad8\u4eae\u5c55\u793a\u62c9<\/p>\n