实现一个炫酷的随机标签排列效果（颜色随机，大小随机，成菱形排列的列表）
.output_wrapper pre code { font-family: Consolas, Inconsolata, Courier, monospace; display: block !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important }
.output_wrapper a:hover { text-decoration: underline; color: rgba(0, 96, 100, 1) }
.output_wrapper figcaption { margin-top: 10px; text-align: center; color: rgba(153, 153, 153, 1); font-size: 0.7em }
.output_wrapper pre code .linenum { padding-right: 20px; word-spacing: 0 }
.task-list-list { list-style-type: none }
.task-list-list.checked { color: rgba(62, 62, 62, 1) }
.task-list-list.uncheck { color: rgba(191, 193, 191, 1) }
.task-list-list .icon_uncheck, .task-list-list .icon_check { display: inline-block; vertical-align: middle; margin-right: 10px }
.task-list-list .icon_check::before { content: “√”; border: 2px solid rgba(62, 62, 62, 1); color: rgba(255, 0, 0, 1) }
.task-list-list .icon_uncheck::before { content: “x”; border: 2px solid rgba(191, 193, 191, 1); color: rgba(191, 193, 191, 1) }
.task-list-list .icon_check::before, .task-list-list .icon_uncheck::before { padding: 2px 8px 2px 5px; border-radius: 5px }
@font-face { font-family: KaTeX_AMS; src: url(“fonts/KaTeX_AMS-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_AMS-Regular.woff”) format(“woff”), url(“fonts/KaTeX_AMS-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Caligraphic; src: url(“fonts/KaTeX_Caligraphic-Bold.woff2”) format(“woff2”), url(“fonts/KaTeX_Caligraphic-Bold.woff”) format(“woff”), url(“fonts/KaTeX_Caligraphic-Bold.ttf”) format(“truetype”); font-weight: bold; font-style: normal }
@font-face { font-family: KaTeX_Caligraphic; src: url(“fonts/KaTeX_Caligraphic-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_Caligraphic-Regular.woff”) format(“woff”), url(“fonts/KaTeX_Caligraphic-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Fraktur; src: url(“fonts/KaTeX_Fraktur-Bold.woff2”) format(“woff2”), url(“fonts/KaTeX_Fraktur-Bold.woff”) format(“woff”), url(“fonts/KaTeX_Fraktur-Bold.ttf”) format(“truetype”); font-weight: bold; font-style: normal }
@font-face { font-family: KaTeX_Fraktur; src: url(“fonts/KaTeX_Fraktur-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_Fraktur-Regular.woff”) format(“woff”), url(“fonts/KaTeX_Fraktur-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Main; src: url(“fonts/KaTeX_Main-Bold.woff2”) format(“woff2”), url(“fonts/KaTeX_Main-Bold.woff”) format(“woff”), url(“fonts/KaTeX_Main-Bold.ttf”) format(“truetype”); font-weight: bold; font-style: normal }
@font-face { font-family: KaTeX_Main; src: url(“fonts/KaTeX_Main-BoldItalic.woff2”) format(“woff2”), url(“fonts/KaTeX_Main-BoldItalic.woff”) format(“woff”), url(“fonts/KaTeX_Main-BoldItalic.ttf”) format(“truetype”); font-weight: bold; font-style: italic }
@font-face { font-family: KaTeX_Main; src: url(“fonts/KaTeX_Main-Italic.woff2”) format(“woff2”), url(“fonts/KaTeX_Main-Italic.woff”) format(“woff”), url(“fonts/KaTeX_Main-Italic.ttf”) format(“truetype”); font-weight: normal; font-style: italic }
@font-face { font-family: KaTeX_Main; src: url(“fonts/KaTeX_Main-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_Main-Regular.woff”) format(“woff”), url(“fonts/KaTeX_Main-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Math; src: url(“fonts/KaTeX_Math-BoldItalic.woff2”) format(“woff2”), url(“fonts/KaTeX_Math-BoldItalic.woff”) format(“woff”), url(“fonts/KaTeX_Math-BoldItalic.ttf”) format(“truetype”); font-weight: bold; font-style: italic }
@font-face { font-family: KaTeX_Math; src: url(“fonts/KaTeX_Math-Italic.woff2”) format(“woff2”), url(“fonts/KaTeX_Math-Italic.woff”) format(“woff”), url(“fonts/KaTeX_Math-Italic.ttf”) format(“truetype”); font-weight: normal; font-style: italic }
@font-face { font-family: KaTeX_SansSerif; src: url(“fonts/KaTeX_SansSerif-Bold.woff2”) format(“woff2”), url(“fonts/KaTeX_SansSerif-Bold.woff”) format(“woff”), url(“fonts/KaTeX_SansSerif-Bold.ttf”) format(“truetype”); font-weight: bold; font-style: normal }
@font-face { font-family: KaTeX_SansSerif; src: url(“fonts/KaTeX_SansSerif-Italic.woff2”) format(“woff2”), url(“fonts/KaTeX_SansSerif-Italic.woff”) format(“woff”), url(“fonts/KaTeX_SansSerif-Italic.ttf”) format(“truetype”); font-weight: normal; font-style: italic }
@font-face { font-family: KaTeX_SansSerif; src: url(“fonts/KaTeX_SansSerif-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_SansSerif-Regular.woff”) format(“woff”), url(“fonts/KaTeX_SansSerif-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Script; src: url(“fonts/KaTeX_Script-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_Script-Regular.woff”) format(“woff”), url(“fonts/KaTeX_Script-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Size1; src: url(“fonts/KaTeX_Size1-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_Size1-Regular.woff”) format(“woff”), url(“fonts/KaTeX_Size1-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Size2; src: url(“fonts/KaTeX_Size2-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_Size2-Regular.woff”) format(“woff”), url(“fonts/KaTeX_Size2-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Size3; src: url(“fonts/KaTeX_Size3-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_Size3-Regular.woff”) format(“woff”), url(“fonts/KaTeX_Size3-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Size4; src: url(“fonts/KaTeX_Size4-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_Size4-Regular.woff”) format(“woff”), url(“fonts/KaTeX_Size4-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@font-face { font-family: KaTeX_Typewriter; src: url(“fonts/KaTeX_Typewriter-Regular.woff2”) format(“woff2”), url(“fonts/KaTeX_Typewriter-Regular.woff”) format(“woff”), url(“fonts/KaTeX_Typewriter-Regular.ttf”) format(“truetype”); font-weight: normal; font-style: normal }
@media screen { .katex .mtable .vertical-separator { min-width: 1px } .katex .mfrac .frac-line, .katex .overline .overline-line, .katex .underline .underline-line, .katex .hline, .katex .hdashline, .katex .rule { min-height: 1px } }
.katex-display { display: block; margin: 1em 0; text-align: center }
.katex-display>.katex { display: block; text-align: center; white-space: nowrap }
.katex-display>.katex>.katex-html { display: block }
.katex-display>.katex>.katex-html>.tag { position: absolute; right: 0 }
.katex { font: normal normal normal normal 1.21em / 1.2 KaTeX_Main, “Times New Roman”, serif; text-indent: 0; text-rendering: auto }
.katex * { }
.katex .katex-mathml { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden }
.katex .katex-html { }
.katex .katex-html>.newline { display: block }
.katex .base { position: relative; display: inline-block; white-space: nowrap; width: min-content }
.katex .strut { display: inline-block }
.katex .textbf { font-weight: bold }
.katex .textit { font-style: italic }
.katex .textrm { font-family: KaTeX_Main }
.katex .textsf { font-family: KaTeX_SansSerif }
.katex .texttt { font-family: KaTeX_Typewriter }
.katex .mathit { font-family: KaTeX_Math; font-style: italic }
.katex .mathrm { font-style: normal }
.katex .mathbf { font-family: KaTeX_Main; font-weight: bold }
.katex .boldsymbol { font-family: KaTeX_Math; font-weight: bold; font-style: italic }
.katex .amsrm { font-family: KaTeX_AMS }
.katex .mathbb, .katex .textbb { font-family: KaTeX_AMS }
.katex .mathcal { font-family: KaTeX_Caligraphic }
.katex .mathfrak, .katex .textfrak { font-family: KaTeX_Fraktur }
.katex .mathtt { font-family: KaTeX_Typewriter }
.katex .mathscr, .katex .textscr { font-family: KaTeX_Script }
.katex .mathsf, .katex .textsf { font-family: KaTeX_SansSerif }
.katex .mainit { font-family: KaTeX_Main; font-style: italic }
.katex .mainrm { font-family: KaTeX_Main; font-style: normal }
.katex .vlist-t { display: inline-table; table-layout: fixed }
.katex .vlist-r { display: table-row }
.katex .vlist { display: table-cell; vertical-align: bottom; position: relative }
.katex .vlist>span { display: block; height: 0; position: relative }
.katex .vlist>span>span { display: inline-block }
.katex .vlist>span>.pstrut { overflow: hidden; width: 0 }
.katex .vlist-t2 { margin-right: -2px }
.katex .vlist-s { display: table-cell; vertical-align: bottom; font-size: 1px; width: 2px; min-width: 2px }
.katex .msupsub { text-align: left }
.katex .mfrac>span>span { text-align: center }
.katex .mfrac .frac-line { display: inline-block; width: 100%; border-bottom-style: solid }
.katex .mspace { display: inline-block }
.katex .llap, .katex .rlap, .katex .clap { width: 0; position: relative }
.katex .llap>.inner, .katex .rlap>.inner, .katex .clap>.inner { position: absolute }
.katex .llap>.fix, .katex .rlap>.fix, .katex .clap>.fix { display: inline-block }
.katex .llap>.inner { right: 0 }
.katex .rlap>.inner, .katex .clap>.inner { left: 0 }
.katex .clap>.inner>span { margin-left: -50%; margin-right: 50% }
.katex .rule { display: inline-block; border: 0 solid; position: relative }
.katex .overline .overline-line, .katex .underline .underline-line, .katex .hline { display: inline-block; width: 100%; border-bottom-style: solid }
.katex .hdashline { display: inline-block; width: 100%; border-bottom-style: dashed }
.katex .sqrt>.root { margin-left: 0.277778em; margin-right: -0.555556em }
.katex .sizing, .katex .fontsize-ensurer { display: inline-block }
.katex .sizing.reset-size1.size1, .katex .fontsize-ensurer.reset-size1.size1 { font-size: 1em }
.katex .sizing.reset-size1.size2, .katex .fontsize-ensurer.reset-size1.size2 { font-size: 1.2em }
.katex .sizing.reset-size1.size3, .katex .fontsize-ensurer.reset-size1.size3 { font-size: 1.4em }
.katex .sizing.reset-size1.size4, .katex .fontsize-ensurer.reset-size1.size4 { font-size: 1.6em }
.katex .sizing.reset-size1.size5, .katex .fontsize-ensurer.reset-size1.size5 { font-size: 1.8em }
.katex .sizing.reset-size1.size6, .katex .fontsize-ensurer.reset-size1.size6 { font-size: 2em }
.katex .sizing.reset-size1.size7, .katex .fontsize-ensurer.reset-size1.size7 { font-size: 2.4em }
.katex .sizing.reset-size1.size8, .katex .fontsize-ensurer.reset-size1.size8 { font-size: 2.88em }
.katex .sizing.reset-size1.size9, .katex .fontsize-ensurer.reset-size1.size9 { font-size: 3.456em }
.katex .sizing.reset-size1.size10, .katex .fontsize-ensurer.reset-size1.size10 { font-size: 4.148em }
.katex .sizing.reset-size1.size11, .katex .fontsize-ensurer.reset-size1.size11 { font-size: 4.976em }
.katex .sizing.reset-size2.size1, .katex .fontsize-ensurer.reset-size2.size1 { font-size: 0.833333em }
.katex .sizing.reset-size2.size2, .katex .fontsize-ensurer.reset-size2.size2 { font-size: 1em }
.katex .sizing.reset-size2.size3, .katex .fontsize-ensurer.reset-size2.size3 { font-size: 1.16667em }
.katex .sizing.reset-size2.size4, .katex .fontsize-ensurer.reset-size2.size4 { font-size: 1.33333em }
.katex .sizing.reset-size2.size5, .katex .fontsize-ensurer.reset-size2.size5 { font-size: 1.5em }
.katex .sizing.reset-size2.size6, .katex .fontsize-ensurer.reset-size2.size6 { font-size: 1.66667em }
.katex .sizing.reset-size2.size7, .katex .fontsize-ensurer.reset-size2.size7 { font-size: 2em }
.katex .sizing.reset-size2.size8, .katex .fontsize-ensurer.reset-size2.size8 { font-size: 2.4em }
.katex .sizing.reset-size2.size9, .katex .fontsize-ensurer.reset-size2.size9 { font-size: 2.88em }
.katex .sizing.reset-size2.size10, .katex .fontsize-ensurer.reset-size2.size10 { font-size: 3.45667em }
.katex .sizing.reset-size2.size11, .katex .fontsize-ensurer.reset-size2.size11 { font-size: 4.14667em }
.katex .sizing.reset-size3.size1, .katex .fontsize-ensurer.reset-size3.size1 { font-size: 0.714286em }
.katex .sizing.reset-size3.size2, .katex .fontsize-ensurer.reset-size3.size2 { font-size: 0.857143em }
.katex .sizing.reset-size3.size3, .katex .fontsize-ensurer.reset-size3.size3 { font-size: 1em }
.katex .sizing.reset-size3.size4, .katex .fontsize-ensurer.reset-size3.size4 { font-size: 1.14286em }
.katex .sizing.reset-size3.size5, .katex .fontsize-ensurer.reset-size3.size5 { font-size: 1.28571em }
.katex .sizing.reset-size3.size6, .katex .fontsize-ensurer.reset-size3.size6 { font-size: 1.42857em }
.katex .sizing.reset-size3.size7, .katex .fontsize-ensurer.reset-size3.size7 { font-size: 1.71429em }
.katex .sizing.reset-size3.size8, .katex .fontsize-ensurer.reset-size3.size8 { font-size: 2.05714em }
.katex .sizing.reset-size3.size9, .katex .fontsize-ensurer.reset-size3.size9 { font-size: 2.46857em }
.katex .sizing.reset-size3.size10, .katex .fontsize-ensurer.reset-size3.size10 { font-size: 2.96286em }
.katex .sizing.reset-size3.size11, .katex .fontsize-ensurer.reset-size3.size11 { font-size: 3.55429em }
.katex .sizing.reset-size4.size1, .katex .fontsize-ensurer.reset-size4.size1 { font-size: 0.625em }
.katex .sizing.reset-size4.size2, .katex .fontsize-ensurer.reset-size4.size2 { font-size: 0.75em }
.katex .sizing.reset-size4.size3, .katex .fontsize-ensurer.reset-size4.size3 { font-size: 0.875em }
.katex .sizing.reset-size4.size4, .katex .fontsize-ensurer.reset-size4.size4 { font-size: 1em }
.katex .sizing.reset-size4.size5, .katex .fontsize-ensurer.reset-size4.size5 { font-size: 1.125em }
.katex .sizing.reset-size4.size6, .katex .fontsize-ensurer.reset-size4.size6 { font-size: 1.25em }
.katex .sizing.reset-size4.size7, .katex .fontsize-ensurer.reset-size4.size7 { font-size: 1.5em }
.katex .sizing.reset-size4.size8, .katex .fontsize-ensurer.reset-size4.size8 { font-size: 1.8em }
.katex .sizing.reset-size4.size9, .katex .fontsize-ensurer.reset-size4.size9 { font-size: 2.16em }
.katex .sizing.reset-size4.size10, .katex .fontsize-ensurer.reset-size4.size10 { font-size: 2.5925em }
.katex .sizing.reset-size4.size11, .katex .fontsize-ensurer.reset-size4.size11 { font-size: 3.11em }
.katex .sizing.reset-size5.size1, .katex .fontsize-ensurer.reset-size5.size1 { font-size: 0.555556em }
.katex .sizing.reset-size5.size2, .katex .fontsize-ensurer.reset-size5.size2 { font-size: 0.666667em }
.katex .sizing.reset-size5.size3, .katex .fontsize-ensurer.reset-size5.size3 { font-size: 0.777778em }
.katex .sizing.reset-size5.size4, .katex .fontsize-ensurer.reset-size5.size4 { font-size: 0.888889em }
.katex .sizing.reset-size5.size5, .katex .fontsize-ensurer.reset-size5.size5 { font-size: 1em }
.katex .sizing.reset-size5.size6, .katex .fontsize-ensurer.reset-size5.size6 { font-size: 1.11111em }
.katex .sizing.reset-size5.size7, .katex .fontsize-ensurer.reset-size5.size7 { font-size: 1.33333em }
.katex .sizing.reset-size5.size8, .katex .fontsize-ensurer.reset-size5.size8 { font-size: 1.6em }
.katex .sizing.reset-size5.size9, .katex .fontsize-ensurer.reset-size5.size9 { font-size: 1.92em }
.katex .sizing.reset-size5.size10, .katex .fontsize-ensurer.reset-size5.size10 { font-size: 2.30444em }
.katex .sizing.reset-size5.size11, .katex .fontsize-ensurer.reset-size5.size11 { font-size: 2.76444em }
.katex .sizing.reset-size6.size1, .katex .fontsize-ensurer.reset-size6.size1 { font-size: 0.5em }
.katex .sizing.reset-size6.size2, .katex .fontsize-ensurer.reset-size6.size2 { font-size: 0.6em }
.katex .sizing.reset-size6.size3, .katex .fontsize-ensurer.reset-size6.size3 { font-size: 0.7em }
.katex .sizing.reset-size6.size4, .katex .fontsize-ensurer.reset-size6.size4 { font-size: 0.8em }
.katex .sizing.reset-size6.size5, .katex .fontsize-ensurer.reset-size6.size5 { font-size: 0.9em }
.katex .sizing.reset-size6.size6, .katex .fontsize-ensurer.reset-size6.size6 { font-size: 1em }
.katex .sizing.reset-size6.size7, .katex .fontsize-ensurer.reset-size6.size7 { font-size: 1.2em }
.katex .sizing.reset-size6.size8, .katex .fontsize-ensurer.reset-size6.size8 { font-size: 1.44em }
.katex .sizing.reset-size6.size9, .katex .fontsize-ensurer.reset-size6.size9 { font-size: 1.728em }
.katex .sizing.reset-size6.size10, .katex .fontsize-ensurer.reset-size6.size10 { font-size: 2.074em }
.katex .sizing.reset-size6.size11, .katex .fontsize-ensurer.reset-size6.size11 { font-size: 2.488em }
.katex .sizing.reset-size7.size1, .katex .fontsize-ensurer.reset-size7.size1 { font-size: 0.416667em }
.katex .sizing.reset-size7.size2, .katex .fontsize-ensurer.reset-size7.size2 { font-size: 0.5em }
.katex .sizing.reset-size7.size3, .katex .fontsize-ensurer.reset-size7.size3 { font-size: 0.583333em }
.katex .sizing.reset-size7.size4, .katex .fontsize-ensurer.reset-size7.size4 { font-size: 0.666667em }
.katex .sizing.reset-size7.size5, .katex .fontsize-ensurer.reset-size7.size5 { font-size: 0.75em }
.katex .sizing.reset-size7.size6, .katex .fontsize-ensurer.reset-size7.size6 { font-size: 0.833333em }
.katex .sizing.reset-size7.size7, .katex .fontsize-ensurer.reset-size7.size7 { font-size: 1em }
.katex .sizing.reset-size7.size8, .katex .fontsize-ensurer.reset-size7.size8 { font-size: 1.2em }
.katex .sizing.reset-size7.size9, .katex .fontsize-ensurer.reset-size7.size9 { font-size: 1.44em }
.katex .sizing.reset-size7.size10, .katex .fontsize-ensurer.reset-size7.size10 { font-size: 1.72833em }
.katex .sizing.reset-size7.size11, .katex .fontsize-ensurer.reset-size7.size11 { font-size: 2.07333em }
.katex .sizing.reset-size8.size1, .katex .fontsize-ensurer.reset-size8.size1 { font-size: 0.347222em }
.katex .sizing.reset-size8.size2, .katex .fontsize-ensurer.reset-size8.size2 { font-size: 0.416667em }
.katex .sizing.reset-size8.size3, .katex .fontsize-ensurer.reset-size8.size3 { font-size: 0.486111em }
.katex .sizing.reset-size8.size4, .katex .fontsize-ensurer.reset-size8.size4 { font-size: 0.555556em }
.katex .sizing.reset-size8.size5, .katex .fontsize-ensurer.reset-size8.size5 { font-size: 0.625em }
.katex .sizing.reset-size8.size6, .katex .fontsize-ensurer.reset-size8.size6 { font-size: 0.694444em }
.katex .sizing.reset-size8.size7, .katex .fontsize-ensurer.reset-size8.size7 { font-size: 0.833333em }
.katex .sizing.reset-size8.size8, .katex .fontsize-ensurer.reset-size8.size8 { font-size: 1em }
.katex .sizing.reset-size8.size9, .katex .fontsize-ensurer.reset-size8.size9 { font-size: 1.2em }
.katex .sizing.reset-size8.size10, .katex .fontsize-ensurer.reset-size8.size10 { font-size: 1.44028em }
.katex .sizing.reset-size8.size11, .katex .fontsize-ensurer.reset-size8.size11 { font-size: 1.72778em }
.katex .sizing.reset-size9.size1, .katex .fontsize-ensurer.reset-size9.size1 { font-size: 0.289352em }
.katex .sizing.reset-size9.size2, .katex .fontsize-ensurer.reset-size9.size2 { font-size: 0.347222em }
.katex .sizing.reset-size9.size3, .katex .fontsize-ensurer.reset-size9.size3 { font-size: 0.405093em }
.katex .sizing.reset-size9.size4, .katex .fontsize-ensurer.reset-size9.size4 { font-size: 0.462963em }
.katex .sizing.reset-size9.size5, .katex .fontsize-ensurer.reset-size9.size5 { font-size: 0.520833em }
.katex .sizing.reset-size9.size6, .katex .fontsize-ensurer.reset-size9.size6 { font-size: 0.578704em }
.katex .sizing.reset-size9.size7, .katex .fontsize-ensurer.reset-size9.size7 { font-size: 0.694444em }
.katex .sizing.reset-size9.size8, .katex .fontsize-ensurer.reset-size9.size8 { font-size: 0.833333em }
.katex .sizing.reset-size9.size9, .katex .fontsize-ensurer.reset-size9.size9 { font-size: 1em }
.katex .sizing.reset-size9.size10, .katex .fontsize-ensurer.reset-size9.size10 { font-size: 1.20023em }
.katex .sizing.reset-size9.size11, .katex .fontsize-ensurer.reset-size9.size11 { font-size: 1.43981em }
.katex .sizing.reset-size10.size1, .katex .fontsize-ensurer.reset-size10.size1 { font-size: 0.24108em }
.katex .sizing.reset-size10.size2, .katex .fontsize-ensurer.reset-size10.size2 { font-size: 0.289296em }
.katex .sizing.reset-size10.size3, .katex .fontsize-ensurer.reset-size10.size3 { font-size: 0.337512em }
.katex .sizing.reset-size10.size4, .katex .fontsize-ensurer.reset-size10.size4 { font-size: 0.385728em }
.katex .sizing.reset-size10.size5, .katex .fontsize-ensurer.reset-size10.size5 { font-size: 0.433944em }
.katex .sizing.reset-size10.size6, .katex .fontsize-ensurer.reset-size10.size6 { font-size: 0.48216em }
.katex .sizing.reset-size10.size7, .katex .fontsize-ensurer.reset-size10.size7 { font-size: 0.578592em }
.katex .sizing.reset-size10.size8, .katex .fontsize-ensurer.reset-size10.size8 { font-size: 0.694311em }
.katex .sizing.reset-size10.size9, .katex .fontsize-ensurer.reset-size10.size9 { font-size: 0.833173em }
.katex .sizing.reset-size10.size10, .katex .fontsize-ensurer.reset-size10.size10 { font-size: 1em }
.katex .sizing.reset-size10.size11, .katex .fontsize-ensurer.reset-size10.size11 { font-size: 1.19961em }
.katex .sizing.reset-size11.size1, .katex .fontsize-ensurer.reset-size11.size1 { font-size: 0.200965em }
.katex .sizing.reset-size11.size2, .katex .fontsize-ensurer.reset-size11.size2 { font-size: 0.241158em }
.katex .sizing.reset-size11.size3, .katex .fontsize-ensurer.reset-size11.size3 { font-size: 0.28135em }
.katex .sizing.reset-size11.size4, .katex .fontsize-ensurer.reset-size11.size4 { font-size: 0.321543em }
.katex .sizing.reset-size11.size5, .katex .fontsize-ensurer.reset-size11.size5 { font-size: 0.361736em }
.katex .sizing.reset-size11.size6, .katex .fontsize-ensurer.reset-size11.size6 { font-size: 0.401929em }
.katex .sizing.reset-size11.size7, .katex .fontsize-ensurer.reset-size11.size7 { font-size: 0.482315em }
.katex .sizing.reset-size11.size8, .katex .fontsize-ensurer.reset-size11.size8 { font-size: 0.578778em }
.katex .sizing.reset-size11.size9, .katex .fontsize-ensurer.reset-size11.size9 { font-size: 0.694534em }
.katex .sizing.reset-size11.size10, .katex .fontsize-ensurer.reset-size11.size10 { font-size: 0.833601em }
.katex .sizing.reset-size11.size11, .katex .fontsize-ensurer.reset-size11.size11 { font-size: 1em }
.katex .delimsizing.size1 { font-family: KaTeX_Size1 }
.katex .delimsizing.size2 { font-family: KaTeX_Size2 }
.katex .delimsizing.size3 { font-family: KaTeX_Size3 }
.katex .delimsizing.size4 { font-family: KaTeX_Size4 }
.katex .delimsizing.mult .delim-size1>span { font-family: KaTeX_Size1 }
.katex .delimsizing.mult .delim-size4>span { font-family: KaTeX_Size4 }
.katex .nulldelimiter { display: inline-block; width: 0.12em }
.katex .delimcenter { position: relative }
.katex .op-symbol { position: relative }
.katex .op-symbol.small-op { font-family: KaTeX_Size1 }
.katex .op-symbol.large-op { font-family: KaTeX_Size2 }
.katex .op-limits>.vlist-t { text-align: center }
.katex .accent>.vlist-t { text-align: center }
.katex .accent .accent-body:not(.accent-full) { width: 0 }
.katex .accent .accent-body { position: relative }
.katex .overlay { display: block }
.katex .mtable .vertical-separator { display: inline-block; margin: 0 -0.025em; border-right: 0.05em solid }
.katex .mtable .vs-dashed { border-right: 0.05em dashed }
.katex .mtable .arraycolsep { display: inline-block }
.katex .mtable .col-align-c>.vlist-t { text-align: center }
.katex .mtable .col-align-l>.vlist-t { text-align: left }
.katex .mtable .col-align-r>.vlist-t { text-align: right }
.katex .svg-align { text-align: left }
.katex svg, .screenShotTempCanvas { display: block; position: absolute; width: 100%; height: inherit; fill: currentColor; stroke: currentColor; fill-rule: nonzero; fill-opacity: 1; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1 }
.katex svg path { stroke: none }
.katex .stretchy { width: 100%; display: block; position: relative; overflow: hidden }
.katex .stretchy::before, .katex .stretchy::after { content: “” }
.katex .hide-tail { width: 100%; position: relative; overflow: hidden }
.katex .halfarrow-left { position: absolute; left: 0; width: 50.2%; overflow: hidden }
.katex .halfarrow-right { position: absolute; right: 0; width: 50.2%; overflow: hidden }
.katex .brace-left { position: absolute; left: 0; width: 25.1%; overflow: hidden }
.katex .brace-center { position: absolute; left: 25%; width: 50%; overflow: hidden }
.katex .brace-right { position: absolute; right: 0; width: 25.1%; overflow: hidden }
.katex .x-arrow-pad { padding: 0 0.5em }
.katex .x-arrow, .katex .mover, .katex .munder { text-align: center }
.katex .boxpad { padding: 0 0.3em }
.katex .fbox { box-sizing: border-box; border: 0.04em solid rgba(0, 0, 0, 1) }
.katex .fcolorbox { box-sizing: border-box; border: 0.04em solid }
.katex .cancel-pad { padding: 0 0.2em }
.katex .cancel-lap { margin-left: -0.2em; margin-right: -0.2em }
.katex .sout { border-bottom-style: solid; border-bottom-width: 0.08em }
.output_wrapper .hljs { color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); display: block; overflow-x: auto; padding: 0.5em }
.output_wrapper .hljs-params { color: rgba(255, 152, 35, 1) }
.output_wrapper .hljs-number, .output_wrapper .hljs-literal, .output_wrapper .hljs-symbol, .output_wrapper .hljs-bullet { color: rgba(174, 135, 250, 1) }
.output_wrapper .hljs-function, .output_wrapper .hljs-built_in, .output_wrapper .hljs-name, .output_wrapper .hljs-keyword, .output_wrapper .hljs-selector-tag, .output_wrapper .hljs-deletion { color: rgba(248, 35, 117, 1) }
.output_wrapper .hljs-variable, .output_wrapper .hljs-template-variable, .output_wrapper .hljs-link { color: rgba(98, 151, 85, 1) }
.output_wrapper .hljs-comment, .output_wrapper .hljs-quote { color: rgba(128, 128, 128, 1) }
.output_wrapper .hljs-meta { color: rgba(91, 218, 237, 1) }
.output_wrapper .hljs-string, .output_wrapper .hljs-attribute, .output_wrapper .hljs-addition { color: rgba(238, 220, 112, 1) }
.output_wrapper .hljs-attr, .output_wrapper .hljs-section, .output_wrapper .hljs-title, .output_wrapper .hljs-type { color: rgba(165, 218, 45, 1) }
.output_wrapper .hljs-selector-class { color: rgba(165, 218, 45, 1) }
.output_wrapper .hljs-emphasis { font-style: italic }
.output_wrapper .hljs-strong { font-weight: bold }
.output_wrapper pre code { line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0 }
.output_wrapper { font-size: 16px; color: rgba(62, 62, 62, 1); line-height: 1.6; font-family: “Helvetica Neue”, Helvetica, “Hiragino Sans GB”, “Microsoft YaHei”, Arial, sans-serif }
.output_wrapper * { font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 }
.output_wrapper p { margin: 1.5em 0 }
.output_wrapper h1, .output_wrapper h2, .output_wrapper h3, .output_wrapper h4, .output_wrapper h5, .output_wrapper h6 { margin: 1.5em 0; font-weight: bold }
.output_wrapper h1 { font-size: 1.6em }
.output_wrapper h2 { font-size: 1.4em }
.output_wrapper h3 { font-size: 1.3em }
.output_wrapper h4 { font-size: 1.2em }
.output_wrapper h5 { font-size: 1em }
.output_wrapper h6 { font-size: 1em }
.output_wrapper h3 { margin-bottom: 2em; margin-right: 5px; padding: 8px 15px; letter-spacing: 2px; background-image: linear-gradient(135deg, rgba(0, 100, 180, 1), rgba(63, 80, 150, 1)); background-color: rgba(63, 81, 181, 1); color: rgba(255, 255, 255, 1); border-left: 10px solid rgba(180, 180, 180, 1); border-radius: 5px; text-shadow: 1px 1px 1px rgba(102, 102, 102, 1); box-shadow: 1px 1px 2px rgba(102, 102, 102, 1) }
.output_wrapper ul, .output_wrapper ol { padding-left: 32px }
.output_wrapper ul { list-style-type: disc }
.output_wrapper ol { list-style-type: decimal }
.output_wrapper li * { }
.output_wrapper li { margin-bottom: 0.5em }
.output_wrapper .code_size_default { line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0 }
.output_wrapper .code_size_tight { line-height: 15px; font-size: 11px; font-weight: normal; word-spacing: -3px; letter-spacing: 0 }
.output_wrapper pre code { font-family: Consolas, Inconsolata, Courier, monospace }
.output_wrapper blockquote { display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0; color: rgba(129, 145, 152, 1); border-left: 6px solid rgba(220, 230, 240, 1); background: rgba(242, 247, 251, 1); overflow: auto; word-wrap: normal; word-break: normal }
.output_wrapper blockquote p { margin: 0 }
.output_wrapper a { text-decoration: none; color: rgba(30, 107, 184, 1); word-wrap: break-word }
.output_wrapper strong { font-weight: bold }
.output_wrapper em { font-style: italic }
.output_wrapper del { font-style: italic }
.output_wrapper strong em { font-weight: bold }
.output_wrapper hr { height: 1px; margin: 1.5rem 0; border-right: none; border-bottom: none; border-left: none; border-top: 1px dashed rgba(165, 165, 165, 1) }
.output_wrapper p code { word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1) }
.output_wrapper img { display: block; margin: 0 auto; max-width: 100% }
.output_wrapper table { display: table; width: 100%; text-align: left }
.output_wrapper tbody { border: 0 }
.output_wrapper table tr { border-top: 1px solid rgba(204, 204, 204, 1); border-right: 0; border-bottom: 0; border-left: 0; background-color: rgba(255, 255, 255, 1) }
.output_wrapper table tr th, .output_wrapper table tr td { font-size: 1em; border: 1px solid rgba(204, 204, 204, 1); padding: 0.5em 1em; text-align: left }
.output_wrapper table tr th { font-weight: bold; background-color: rgba(240, 240, 240, 1) }
body { width: 100%; margin: 0; padding: 0 }
#export_content { margin: 0; padding: 5px; background: rgba(255, 255, 255, 1) }
实现一个文字颜色随机，字体大小成正态分布，整体呈菱形的排列的标签列表；
如何实现一个如下图随机排布的标签列表（vue语法）：
dome示例: http://39.106.166.212/tag
首先假设我们可以拿到一个标签列表的数组，这里将一步步实现如图效果：
1、创建tag组件，编写 随机颜色方法 和 大小成正态分布的方法 实现颜色和大小随机的文字标签；
（1）编写随机颜色方法$RandomColor
通过随机生成一个有效范围内的rgb值即可实现；
/*随机颜色rgb*/
const $RandomColor = function(){
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
return "rgb("+r+\',\'+g+\',\'+b+")";
}
为了防止与背景颜色重合也可hsl模式生成，降低明度防止与背景重合；
/*随机颜色hsl*/
const $RandomColor2 = function() {
return "hsl(" +
Math.round(Math.random() * 360) + "," +
Math.round(Math.random() * 100) + \'%,\' +
Math.round(Math.random() * 80) + \'%)\';
}
（2）编写实现正态分布的方法$Normal
js中只有随机分布，通过网上查找方法可以通过Box-muller算法将两个随机分布拼接为一个正态分布：
参考：
https://www.cnblogs.com/zztt/p/4025207.html
https://en.wikipedia.org/wiki/Box%E2%80%93Muller_transform，写成js为
入参为均值和方差：
/*利用Box-Muller方法极坐标形式 使用两个均匀分布产生一个正态分布*/
const $Normal = function(mean,sigma){
var u=0.0, v=0.0, w=0.0, c=0.0;
do{
//获得两个（-1,1）的独立随机变量
u=Math.random()*2-1.0;
v=Math.random()*2-1.0;
w=u*u+v*v;
}while(w==0.0||w>=1.0)
c=Math.sqrt((-2*Math.log(w))/w);
return mean+u*c*sigma;
}
自此一个随机颜色和大小的tag组件完成
2、将数组随机排列为菱形（中间多两头少的列表）
首先在created中从接口获取到如下一个数组列表，这里我们不使用最大值参数，默认为剩余的一半；
（1）编写随机拆分一个数的方法$RandomSplit获取一组和为列表长度的数组；
/*
* 随机拆分一个数
* params 总和，个数，最大值 {num}
*/
const $RandomSplit = function(total,nums,max) {
let rest = total;
let result = Array.apply(null, { length: nums })
.map((n, i) => nums - i)
.map(n => {
const v = 1 + Math.floor(Math.random() * (max | rest / n * 2 - 1));
rest -= v;
return v;
});
result[nums - 1] += rest;
return result;
}
下图是将44随机拆分为8个数的和，
（2）编写$NormalSort方法将上面获取到的数随机排列为两端小中间大数组；
大概思路为先排序，然后每次去两个数分别放置在两端，放置的过程汇总计算两端和，判断大小选择性放置，防止两端排布不均匀
/*类正态排序*/
const $NormalSort = function(arr){
var temp = [], i = 0, l = arr.length,leftTo=0,rightTo=0,
sortArr = arr.sort(function(a,b){return b-a}); //先将数组从大到小排列得到 [7,6,5,5,4,3,2,1]
while(arr.length>1){
let a = arr.pop();
let b= arr.pop();
if(leftTo<rightTo){
temp[i] = b;
temp[l-(i+1)] = a;
}else{
temp[i] = b;
temp[l-(i+1)] = a;
}
i++;
}
return temp;
}
我们该方法将上一步的数组重新排序为：
（3）最后将list数据按照上一步获取的数据结构从新生成一个可供v-for使用的数据结构；
computed:{
tags(){
this.list = $NormalSort($RandomSplit(this.tagList.length,8));//获取数据结构
let temp = this.tagList.sort(function(a,b){ //重新随机排序
return Math.random()>.5 ? -1 : 1;
}).concat();
return this.list.map((v,k) => {//根据list生成数据结构
return temp.splice(0,v);
})
}
},
html代码
<div v-for="(item,index) in tags" :key="index" class="tag-body-tags-li">
<Tag v-for="(tag,index) in item" :key="tag.id" :tname="tag.name" ></Tag>
</div>