mathpix-markdown-it
Version:
Mathpix-markdown-it is an open source implementation of the mathpix-markdown spec written in Typescript. It relies on the following open source libraries: MathJax v3 (to render math with SVGs), markdown-it (for standard Markdown parsing)
961 lines • 2.67 MB
HTML
<!DOCTYPE html>
<html lang="en" data-lt-installed="true"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Tables</title>
<style>
body {
font-family: Arial, sans-serif;
}
.tabs {
display: flex;
cursor: pointer;
margin-bottom: 1rem;
}
.tab {
padding: 10px 20px;
border: 1px solid #ccc;
border-bottom: none;
background-color: #f1f1f1;
}
.tab.active {
background-color: white;
font-weight: bold;
border-top: 2px solid #007BFF;
}
.tab-content {
display: none;
border: 1px solid #ccc;
padding: 10px;
background-color: white;
}
.tab-content.active {
display: block;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
#loading.hide {
display: none;
}
</style>
<style id="MJX-SVG-styles">
mjx-container[jax="SVG"] {
direction: ltr;
}
mjx-container[jax="SVG"] > svg {
overflow: visible;
min-height: 1px;
min-width: 1px;
}
mjx-container[jax="SVG"] > svg a {
fill: blue;
stroke: blue;
}
mjx-assistive-mml {
position: absolute !important;
top: 0px;
left: 0px;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0px 0px 0px !important;
border: 0px !important;
display: block !important;
width: auto !important;
overflow: hidden !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
mjx-assistive-mml[display="block"] {
width: 100% !important;
}
mjx-container[jax="SVG"][display="true"] {
display: block;
text-align: center;
margin: 1em 0;
}
mjx-container[jax="SVG"][display="true"][width="full"] {
display: flex;
}
mjx-container[jax="SVG"][justify="left"] {
text-align: left;
}
mjx-container[jax="SVG"][justify="right"] {
text-align: right;
}
g[data-mml-node="merror"] > g {
fill: red;
stroke: red;
}
g[data-mml-node="merror"] > rect[data-background] {
fill: yellow;
stroke: none;
}
g[data-mml-node="mtable"] > line[data-line], svg[data-table] > g > line[data-line] {
stroke-width: 70px;
fill: none;
}
g[data-mml-node="mtable"] > rect[data-frame], svg[data-table] > g > rect[data-frame] {
stroke-width: 70px;
fill: none;
}
g[data-mml-node="mtable"] > .mjx-dashed, svg[data-table] > g > .mjx-dashed {
stroke-dasharray: 140;
}
g[data-mml-node="mtable"] > .mjx-dotted, svg[data-table] > g > .mjx-dotted {
stroke-linecap: round;
stroke-dasharray: 0,140;
}
g[data-mml-node="mtable"] > g > svg {
overflow: visible;
}
[jax="SVG"] mjx-tool {
display: inline-block;
position: relative;
width: 0;
height: 0;
}
[jax="SVG"] mjx-tool > mjx-tip {
position: absolute;
top: 0;
left: 0;
}
mjx-tool > mjx-tip {
display: inline-block;
padding: .2em;
border: 1px solid #888;
font-size: 70%;
background-color: #F8F8F8;
color: black;
box-shadow: 2px 2px 5px #AAAAAA;
}
g[data-mml-node="maction"][data-toggle] {
cursor: pointer;
}
mjx-status {
display: block;
position: fixed;
left: 1em;
bottom: 1em;
min-width: 25%;
padding: .2em .4em;
border: 1px solid #888;
font-size: 90%;
background-color: #F8F8F8;
color: black;
}
foreignObject[data-mjx-xml] {
font-family: initial;
line-height: normal;
overflow: visible;
}
mjx-container[jax="SVG"] path[data-c], mjx-container[jax="SVG"] use[data-c] {
stroke-width: 3;
}
</style>
<style id="Mathpix-styles">
#setText > div {
justify-content: inherit;
margin-top: 0;
margin-bottom: 1em;
}
#setText div:last-child {
margin-bottom: 0 !important;
}
#setText > br, #preview-content br {
line-height: 1.2;
}
#preview-content > div {
margin-top: 0;
margin-bottom: 1em;
}
.proof > div, .theorem > div {
margin-top: 1rem;
}
#preview-content table {
margin-bottom: 1em;
}
#setText table {
margin-bottom: 1em;
}
#preview-content .sub-table table, #setText .sub-table table {
margin-bottom: 0;
}
mjx-container {
text-indent: 0;
overflow-y: hidden;
overflow-x: auto;
padding-top: 1px;
padding-bottom: 1px;
}
.math-inline mjx-container {
display: inline-block !important;
page-break-inside: avoid;
max-width: 100%;
padding: 0;
line-height: 0;
}
.math-inline mjx-container mjx-assistive-mml {
max-width: 100%;
}
.math-block {
align-items: center;
page-break-after: auto;
page-break-inside: avoid;
margin: 0;
display: block; /* mjx-container has block */
}
.math-inline {
display: inline-flex; /* mjx-container has inline-block. To prevent displacement during use overflow-x: auto;*/
max-width: 100%;
}
.math-block[data-width="full"] {
overflow-x: auto;
display: flex; /* mjx-container has flex */
}
svg .math-inline {
display: initial;
max-width: initial;
}
svg .math-inline mjx-container {
max-width: initial;
}
svg mjx-container {
overflow: visible;
padding: 0;
}
svg math-block[data-width="full"] {
overflow: visible;
}
.math-block[data-highlight-color] mjx-container[jax="SVG"] > svg {
background-color: var(--mmd-highlight-color);
}
.math-block[data-highlight-text-color] mjx-container[jax="SVG"] > svg {
color: var(--mmd-highlight-text-color);
}
.math-inline[data-highlight-color] mjx-container[jax="SVG"] {
background-color: var(--mmd-highlight-color);
}
.math-inline[data-highlight-text-color] mjx-container[jax="SVG"] {
color: var(--mmd-highlight-text-color);
}
.math-block p {
flex-shrink: 1;
}
.math-block mjx-container {
margin: 0 !important;
}
.math-error {
background-color: yellow;
color: red;
}
#preview-content img, #setText img {
max-width: 100%;
}
#preview-content blockquote, #setText blockquote {
page-break-inside: avoid;
color: #666;
margin: 0 0 1em 0;
padding-left: 3em;
border-left: .5em solid #eee;
}
#preview-content pre, #setText pre {
border: none;
padding: 0;
overflow: auto;
font-size: 85%;
line-height: 1.45;
border-radius: 6px;
box-sizing: border-box;
background: #f8f8fa;
}
#preview-content pre code, #setText pre code{
padding: 1rem;
display: block;
overflow-x: auto;
line-height: 24px;
}
.empty {
text-align: center;
font-size: 18px;
padding: 50px 0 !important;
}
#setText table, #preview-content table {
display: table;
overflow: auto;
max-width: 100%;
border-collapse: collapse;
page-break-inside: avoid;
}
#setText table th, #preview-content table th {
text-align: center;
font-weight: bold;
}
#setText table td, #preview-content table td,
#setText table th, #preview-content table th {
border: 1px solid #dfe2e5;
padding: 6px 13px;
}
#setText table tr, #preview-content table tr {
background-color: #fff;
border-top: 1px solid #c6cbd1;
}
#setText table tr:nth-child(2n), #preview-content table tr:nth-child(2n) {
background-color: #f6f8fa;
}
#setText .main-title, #setText .author, #preview-content .main-title, #preview-content .author {
text-align: center;
margin: 0 auto;
}
#preview-content .main-title, #setText .main-title {
line-height: 1.2;
margin-bottom: 1em;
}
#preview-content .author, #setText .author {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#preview-content .author p, #setText .author p {
min-width: 30%;
max-width: 50%;
padding: 0 7px;
}
#preview-content .author > p > span, #setText .author > p > span {
display: block;
text-align: center;
}
#preview-content .section-title, #setText .section-title {
margin-top: 1.5em;
}
#preview-content .abstract, #setText .abstract {
text-align: justify;
margin-bottom: 1em;
}
#preview-content .abstract p, #setText .abstract p {
margin-bottom: 0;
}
@media print {
#preview {
font-size: 10pt!important;
}
svg {
shape-rendering: crispEdges;
}
.math-block svg, math-inline svg {
margin-top: 1px;
}
#preview-content img, #setText img {
display: block;
}
#preview-content .figure_img img, #setText .figure_img img {
display: inline;
}
.preview-right {
word-break: break-word;
}
#preview-content h1, #setText h1 {
page-break-inside: avoid;
position: relative;
border: 2px solid transparent;
}
#preview-content h1::after, #setText h1::after {
content: "";
display: block;
height: 100px;
margin-bottom: -100px;
position: relative;
}
#preview-content h2, #setText h2 {
page-break-inside: avoid;
position: relative;
border: 2px solid transparent;
}
#preview-content h2::after, #setText h2::after {
content: "";
display: block;
height: 100px;
margin-bottom: -100px;
position: relative;
}
#preview-content h3, #setText h3 {
page-break-inside: avoid;
position: relative;
border: 2px solid transparent;
}
#preview-content h3::after, #setText h3::after {
content: "";
display: block;
height: 100px;
margin-bottom: -100px;
position: relative;
}
#preview-content h4, #setText h4 {
page-break-inside: avoid;
position: relative;
border: 2px solid transparent;
}
#preview-content h4::after, #setText h4::after {
content: "";
display: block;
height: 100px;
margin-bottom: -100px;
position: relative;
}
#preview-content h5, #setText h5 {
page-break-inside: avoid;
position: relative;
border: 2px solid transparent;
}
#preview-content h5::after, #setText h5::after {
content: "";
display: block;
height: 100px;
margin-bottom: -100px;
position: relative;
}
#preview-content h6, #setText h6 {
page-break-inside: avoid;
position: relative;
border: 2px solid transparent;
}
#preview-content h6::after, #setText h6::after {
content: "";
display: block;
height: 100px;
margin-bottom: -100px;
position: relative;
}
}
#preview-content sup, #setText sup {
top: -.5em;
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
#preview-content .text-url, #setText .text-url {
color: #0B93ff;
cursor: text;
pointer-events: none;
}
#preview-content .text-url a:hover, #setText .text-url a:hover {
color: #0B93ff;
}
mark {
background-color: #feffe6;
}
span[data-underline-type] mark {
background: inherit;
background-color: #feffe6;
padding-top: 0;
padding-bottom: 0;
}
*[data-has-dotfill] {
position: relative;
overflow: hidden;
}
*[data-has-dotfill] .dotfill::after {
position: absolute;
padding-left: .25ch;
content: " . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . . . . ";
text-align: right;
}
.smiles {
text-align: center;
}
div.svg-container, #setText > div.svg-container {
display: flex;
justify-content: center;
}
#preview-content code, #setText code {
font-family: Inconsolata;
font-size: inherit;
display: initial;
background: #f8f8fa;
}
#preview-content .mmd-highlight code, #setText .mmd-highlight code,
#preview-content pre.mmd-highlight code, #setText pre.mmd-highlight code {
background-color: transparent;
}
#preview-content pre code, #setText pre code {
font-family: 'DM Mono', Inconsolata, monospace;
color: #333;
font-size: 15px;
}
.hljs-comment,
.hljs-quote {
color: #998;
font-style: italic;
}
.hljs-command {
color: #005cc5;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #d73a49;
font-weight: bold;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #005cc5;
}
.hljs-string,
.hljs-doctag {
color: #24292e;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: #6f42c1;
font-weight: bold;
}
.hljs-subst {
font-weight: normal;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #000080;
font-weight: normal;
}
.hljs-regexp,
.hljs-link {
color: #009926;
}
.hljs-symbol,
.hljs-bullet {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #24292e;
}
.hljs-meta {
color: #999;
font-weight: bold;
}
.hljs-meta-keyword {
color: #d73a49;
}
.hljs-meta-string {
color: #032f62;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.table_tabular table th, .table_tabular table th {
border: none !important;
padding: 6px 13px;
}
#tabular tr, #tabular tr {
border-top: none !important;
border-bottom: none !important;
}
#tabular td, #tabular td {
border-style: none !important;
background-color: #fff;
border-color: #000 !important;
word-break: keep-all;
padding: 0.1em 0.5em !important;
}
#tabular {
display: inline-block !important;
}
#tabular td > p {
margin-bottom: 0;
margin-top: 0;
}
#tabular td._empty {
height: 1.3em;
}
#tabular td .f {
opacity: 0;
}
html[data-theme="dark"] #tabular tr, html[data-theme="dark"] #tabular td {
background-color: #202226;
border-color: #fff !important;
}
.table_tabular {
overflow-x: auto;
padding: 0 2px 0.5em 2px;
}
.figure_img {
margin-bottom: 0.5em;
overflow-x: auto;
}
ol.enumerate, ul.itemize {
padding-inline-start: 40px;
}
/* It's commented because counter not supporting to change value
ol.enumerate.lower-alpha {
counter-reset: item ;
list-style-type: none !important;
}
.enumerate.lower-alpha > li {
position: relative;
}
.enumerate.lower-alpha > li:before {
content: "("counter(item, lower-alpha)")";
counter-increment: item;
position: absolute;
left: -47px;
width: 47px;
display: flex;
justify-content: flex-end;
padding-right: 7px;
flex-wrap: nowrap;
word-break: keep-all;
}
*/
.itemize > li {
position: relative;
}
.itemize > li > span.li_level, .li_enumerate.not_number > span.li_level {
position: absolute;
right: 100%;
white-space: nowrap;
width: max-content;;
display: flex;
justify-content: flex-end;
padding-right: 10px;
box-sizing: border-box;
}
.li_enumerate.not_number {
position: relative;
display: inline-block;
list-style-type: none;
}
#toc {
width: 25%;
overflow-y: auto;
min-width: 370px;
}
@media only screen and (max-width: 960px) {
#{containerName} {
display: none;
}
}
@media print {
#{containerName} {
display: none;
}
}
#toc_container {
padding: 70px 0 0 60px;
}
#toc_container .toc-title-1 {
font-weight: 500;
}
#toc_container .toc-title-1 a {
font-size: 1.6em;
}
#toc_container .toc-title-2 a {
font-size: 1.3em;
}
#toc_container .toc-title-3, #toc_container .toc-title-4, #toc_container .toc-title-5, .previewPage #toc_container .toc-title-6 {
padding-left: 20px;
}
#toc_container .toc-title-3 a, #toc_container .toc-title-4 > a, #toc_container .toc-title-5 > a, .previewPage #toc_container .toc-title-6 > a {
font-size: 1em;
color: #979797;
}
#toc_container ul {
list-style: none;
padding: 0;
margin: 0;
}
#toc_container li {
padding-top: 20px;
}
#toc_container li a {
color: #000;
}
#toc_container li a:hover {
color: #0093FF;
}
#toc_container li a:active,
#toc_container li .selected {
color: #047DD6 !important;
}
.mmd-menu {
max-width: 320px;
position: absolute;
background-color: white;
color: black;
width: auto;
padding: 5px 0px;
border: 1px solid #E5E6EB;
margin: 0;
cursor: default;
font: menu;
text-align: left;
text-indent: 0;
text-transform: none;
line-height: normal;
letter-spacing: normal;
word-spacing: normal;
word-wrap: normal;
white-space: nowrap;
float: none;
z-index: 201;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
box-shadow: 0px 10px 20px #808080;
-webkit-box-shadow: 0px 10px 20px #808080;
-moz-box-shadow: 0px 10px 20px #808080;
-khtml-box-shadow: 0px 10px 20px #808080;
}
.mmd-menu:focus { outline: none; }
.mmd-menu.mmd-menu-sm {
max-width: 100vw;
padding-bottom: 34px;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-khtml-border-radius: 0;
}
.mmd-menu-item-icon {
color: #1e2029;
margin-left: auto;
align-items: center;
display: flex;
flex-shrink: 0;
display: none;
}
.mmd-menu-item {
padding-bottom: 8px;
padding-top: 8px;
padding-left: 1.25rem;
padding-right: 1.25rem;
display: flex;
background: transparent;
height: 52px;
max-height: 52px;
}
.mmd-menu-item:focus { outline: none; }
.mmd-menu-item.active {
background-color: #e1e0e5;
}
.mmd-menu-item.active .mmd-menu-item-icon {
display: flex;
}
.mmd-menu-item-container {
overflow: hidden;
}
.mmd-menu-item-title {
color: #1e2029;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
line-height: 20px;
}
.mmd-menu-item-value {
color: #7d829c;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px;
line-height: 16px;
}
html[data-theme="dark"] .mmd-menu-item-title {
color: #ebefe7;
}
html[data-theme="dark"] .mmd-menu-item.active .mmd-menu-item-title {
color: #1e2029;
}
html[data-theme="dark"] .mmd-menu {
background-color: #33363a;
}
.mmd-context-menu-overlay{
background: rgba(0, 0, 0, 0.56);
}
.ClipboardButton {
padding: 0;
margin: 0.5rem;
display: inline-block;
cursor: pointer;
color: rgb(36, 41, 47);
background: rgb(246, 248, 250);
border-radius: 6px;
border: 1px solid rgba(31, 35, 40, 0.15);
box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0 0, rgba(255, 255, 255, 0.25) 0 1 0 0 inset;
position: relative;
}
.ClipboardButton:hover {
background-color: rgb(243, 244, 246);
border-color rgba(31, 35, 40, 0.15);
transition-duration: .1s;
}
.mmd-clipboard-icon {
fill: currentColor;
vertical-align: text-bottom;
}
.mmd-clipboard-copy-icon {
color: rgb(101, 109, 118);
}
.mmd-clipboard-check-icon {
color: rgb(26, 127, 55);
}
.mmd-tooltipped-no-delay:hover::before,
.mmd-tooltipped-no-delay:hover::after {
animation-delay: 0s;
}
.mmd-tooltipped:hover::before,
.mmd-tooltipped:hover::after {
display: inline-block;
text-decoration: none;
animation-name: tooltip-appear;
animation-duration: .1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
animation-delay: .4s;
}
.mmd-tooltipped-w::before {
top: 50%;
bottom: 50%;
left: -7px;
margin-top: -6px;
border-left-color: rgb(36, 41, 47)
}
.mmd-tooltipped::before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgb(36, 41, 47)
pointer-events: none;
content: "";
border: 6px solid transparent;
opacity: 0;
}
.mmd-tooltipped-w::after {
right: 100%;
bottom: 50%;
margin-right: 6px;
transform: translateY(50%);
}
.mmd-tooltipped::after {
position: absolute;
z-index: 1000000;
display: none;
padding: 0.5em 0.75em;
font: normal normal 11px/1.5 'CMU Serif', 'Georgia', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
color: rgb(255, 255, 255);
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgb(36, 41, 47);
border-radius: 6px;
opacity: 0;
}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<!-- Tabs will be dynamically added here -->
<div class="tab active" data-index="0">Unicode icons</div>
<div class="tab" data-index="1">Squared icons</div>
<div class="tab" data-index="2">fa-icons</div>
<div class="tab" data-index="3">Emoji icons</div>
</div>
<div id="tab-contents">
<!-- Tab contents will be dynamically added here -->
<div id="loading" class="hide">Loading...</div>
<div class="tab-content active" data-index="0"><table><thead><tr><th>Text mode mmd</th><th>result</th><th>Math mode mmd</th><th>result</th></tr></thead><tbody><tr><td id="setText"><div><code>\icon{unknown} \icon{red_unknown} \icon{unknown red} \icon{unknown color=red}</code></div>
</td><td id="setText"><div><span>�</span> <span style="color: red;">�</span> <span style="color: red;">�</span> <span style="color: red;">�</span></div>
</td><td id="setText"><div><code>\(\icon{unknown} \icon{red_unknown} \icon{unknown red} \icon{unknown color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="9.95ex" height="2.149ex" role="img" focusable="false" viewBox="0 -750 4398 950" style="vertical-align: -0.452ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mpadded"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">�</text></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(1099.5,0)"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">�</text></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(2199,0)"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">�</text></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(3298.5,0)"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">�</text></g></g></g></g></svg></mjx-container></span></div>
</td></tr><tr><td id="setText"><div><code>\icon{times} \icon{red_times} \icon{times red} \icon{times color=red}</code></div>
</td><td id="setText"><div><span>×</span> <span style="color: red;">×</span> <span style="color: red;">×</span> <span style="color: red;">×</span></div>
</td><td id="setText"><div><code>\(\icon{times} \icon{red_times} \icon{times red} \icon{times color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="8.991ex" height="1.09ex" role="img" focusable="false" viewBox="0 -491 3974 482" style="vertical-align: 0.02ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mpadded"><g data-mml-node="mtext"><path data-c="D7" d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(993.5,0)"><g data-mml-node="mtext"><path data-c="D7" d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(1987,0)"><g data-mml-node="mtext"><path data-c="D7" d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(2980.5,0)"><g data-mml-node="mtext"><path data-c="D7" d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z"></path></g></g></g></g></svg></mjx-container></span></div>
</td></tr><tr><td id="setText"><div><code>\icon{bullet} \icon{red_bullet} \icon{bullet red} \icon{bullet color=red}</code></div>
</td><td id="setText"><div><span>•</span> <span style="color: red;">•</span> <span style="color: red;">•</span> <span style="color: red;">•</span></div>
</td><td id="setText"><div><code>\(\icon{bullet} \icon{red_bullet} \icon{bullet red} \icon{bullet color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="6.475ex" height="0.88ex" role="img" focusable="false" viewBox="0 -444 2862 389" style="vertical-align: 0.124ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mpadded"><g data-mml-node="mtext"><path data-c="2022" d="M55 251Q55 328 112 386T249 444T386 388T444 249Q444 171 388 113T250 55Q170 55 113 112T55 251Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(715.5,0)"><g data-mml-node="mtext"><path data-c="2022" d="M55 251Q55 328 112 386T249 444T386 388T444 249Q444 171 388 113T250 55Q170 55 113 112T55 251Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(1431,0)"><g data-mml-node="mtext"><path data-c="2022" d="M55 251Q55 328 112 386T249 444T386 388T444 249Q444 171 388 113T250 55Q170 55 113 112T55 251Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(2146.5,0)"><g data-mml-node="mtext"><path data-c="2022" d="M55 251Q55 328 112 386T249 444T386 388T444 249Q444 171 388 113T250 55Q170 55 113 112T55 251Z"></path></g></g></g></g></svg></mjx-container></span></div>
</td></tr><tr><td id="setText"><div><code>\icon{reference_mark} \icon{red_reference_mark} \icon{reference_mark red} \icon{reference_mark color=red}</code></div>
</td><td id="setText"><div><span>※</span> <span style="color: red;">※</span> <span style="color: red;">※</span> <span style="color: red;">※</span></div>
</td><td id="setText"><div><code>\(\icon{reference_mark} \icon{red_reference_mark} \icon{reference_mark red} \icon{reference_mark color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="7.732ex" height="2.149ex" role="img" focusable="false" viewBox="0 -750 3417.4 950" style="vertical-align: -0.452ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mpadded"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">※</text></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(854.4,0)"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">※</text></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(1708.7,0)"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">※</text></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(2563.1,0)"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">※</text></g></g></g></g></svg></mjx-container></span></div>
</td></tr><tr><td id="setText"><div><code>\icon{left_arrow} \icon{red_left_arrow} \icon{left_arrow red} \icon{left_arrow color=red}</code></div>
</td><td id="setText"><div><span>←</span> <span style="color: red;">←</span> <span style="color: red;">←</span> <span style="color: red;">←</span></div>
</td><td id="setText"><div><code>\(\icon{left_arrow} \icon{red_left_arrow} \icon{left_arrow red} \icon{left_arrow color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="11ex" height="1.181ex" role="img" focusable="false" viewBox="0 -511 4862 522" style="vertical-align: -0.025ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mpadded"><g data-mml-node="mtext"><path data-c="2190" d="M944 261T944 250T929 230H165Q167 228 182 216T211 189T244 152T277 96T303 25Q308 7 308 0Q308 -11 288 -11Q281 -11 278 -11T272 -7T267 2T263 21Q245 94 195 151T73 236Q58 242 55 247Q55 254 59 257T73 264Q121 283 158 314T215 375T247 434T264 480L267 497Q269 503 270 505T275 509T288 511Q308 511 308 500Q308 493 303 475Q293 438 278 406T246 352T215 315T185 287T165 270H929Q944 261 944 250Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(1215.5,0)"><g data-mml-node="mtext"><path data-c="2190" d="M944 261T944 250T929 230H165Q167 228 182 216T211 189T244 152T277 96T303 25Q308 7 308 0Q308 -11 288 -11Q281 -11 278 -11T272 -7T267 2T263 21Q245 94 195 151T73 236Q58 242 55 247Q55 254 59 257T73 264Q121 283 158 314T215 375T247 434T264 480L267 497Q269 503 270 505T275 509T288 511Q308 511 308 500Q308 493 303 475Q293 438 278 406T246 352T215 315T185 287T165 270H929Q944 261 944 250Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(2431,0)"><g data-mml-node="mtext"><path data-c="2190" d="M944 261T944 250T929 230H165Q167 228 182 216T211 189T244 152T277 96T303 25Q308 7 308 0Q308 -11 288 -11Q281 -11 278 -11T272 -7T267 2T263 21Q245 94 195 151T73 236Q58 242 55 247Q55 254 59 257T73 264Q121 283 158 314T215 375T247 434T264 480L267 497Q269 503 270 505T275 509T288 511Q308 511 308 500Q308 493 303 475Q293 438 278 406T246 352T215 315T185 287T165 270H929Q944 261 944 250Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(3646.5,0)"><g data-mml-node="mtext"><path data-c="2190" d="M944 261T944 250T929 230H165Q167 228 182 216T211 189T244 152T277 96T303 25Q308 7 308 0Q308 -11 288 -11Q281 -11 278 -11T272 -7T267 2T263 21Q245 94 195 151T73 236Q58 242 55 247Q55 254 59 257T73 264Q121 283 158 314T215 375T247 434T264 480L267 497Q269 503 270 505T275 509T288 511Q308 511 308 500Q308 493 303 475Q293 438 278 406T246 352T215 315T185 287T165 270H929Q944 261 944 250Z"></path></g></g></g></g></svg></mjx-container></span></div>
</td></tr><tr><td id="setText"><div><code>\icon{up_arrow} \icon{red_up_arrow} \icon{up_arrow red} \icon{up_arrow color=red}</code></div>
</td><td id="setText"><div><span>↑</span> <span style="color: red;">↑</span> <span style="color: red;">↑</span> <span style="color: red;">↑</span></div>
</td><td id="setText"><div><code>\(\icon{up_arrow} \icon{red_up_arrow} \icon{up_arrow red} \icon{up_arrow color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="6.475ex" height="2.007ex" role="img" focusable="false" viewBox="0 -694 2862 887" style="vertical-align: -0.437ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mpadded"><g data-mml-node="mtext"><path data-c="2191" d="M27 414Q17 414 17 433Q17 437 17 439T17 444T19 447T20 450T22 452T26 453T30 454T36 456Q80 467 120 494T180 549Q227 607 238 678Q240 694 251 694Q259 694 261 684Q261 677 265 659T284 608T320 549Q340 525 363 507T405 479T440 463T467 455T479 451Q483 447 483 433Q483 413 472 413Q467 413 458 416Q342 448 277 545L270 555V-179Q262 -193 252 -193H250H248Q236 -193 230 -179V555L223 545Q192 499 146 467T70 424T27 414Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(715.5,0)"><g data-mml-node="mtext"><path data-c="2191" d="M27 414Q17 414 17 433Q17 437 17 439T17 444T19 447T20 450T22 452T26 453T30 454T36 456Q80 467 120 494T180 549Q227 607 238 678Q240 694 251 694Q259 694 261 684Q261 677 265 659T284 608T320 549Q340 525 363 507T405 479T440 463T467 455T479 451Q483 447 483 433Q483 413 472 413Q467 413 458 416Q342 448 277 545L270 555V-179Q262 -193 252 -193H250H248Q236 -193 230 -179V555L223 545Q192 499 146 467T70 424T27 414Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(1431,0)"><g data-mml-node="mtext"><path data-c="2191" d="M27 414Q17 414 17 433Q17 437 17 439T17 444T19 447T20 450T22 452T26 453T30 454T36 456Q80 467 120 494T180 549Q227 607 238 678Q240 694 251 694Q259 694 261 684Q261 677 265 659T284 608T320 549Q340 525 363 507T405 479T440 463T467 455T479 451Q483 447 483 433Q483 413 472 413Q467 413 458 416Q342 448 277 545L270 555V-179Q262 -193 252 -193H250H248Q236 -193 230 -179V555L223 545Q192 499 146 467T70 424T27 414Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(2146.5,0)"><g data-mml-node="mtext"><path data-c="2191" d="M27 414Q17 414 17 433Q17 437 17 439T17 444T19 447T20 450T22 452T26 453T30 454T36 456Q80 467 120 494T180 549Q227 607 238 678Q240 694 251 694Q259 694 261 684Q261 677 265 659T284 608T320 549Q340 525 363 507T405 479T440 463T467 455T479 451Q483 447 483 433Q483 413 472 413Q467 413 458 416Q342 448 277 545L270 555V-179Q262 -193 252 -193H250H248Q236 -193 230 -179V555L223 545Q192 499 146 467T70 424T27 414Z"></path></g></g></g></g></svg></mjx-container></span></div>
</td></tr><tr><td id="setText"><div><code>\icon{right_arrow} \icon{red_right_arrow} \icon{right_arrow red} \icon{right_arrow color=red}</code></div>
</td><td id="setText"><div><span>→</span> <span style="color: red;">→</span> <span style="color: red;">→</span> <span style="color: red;">→</span></div>
</td><td id="setText"><div><code>\(\icon{right_arrow} \icon{red_right_arrow} \icon{right_arrow red} \icon{right_arrow color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="11ex" height="1.181ex" role="img" focusable="false" viewBox="0 -511 4862 522" style="vertical-align: -0.025ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mpadded"><g data-mml-node="mtext"><path data-c="2192" d="M56 237T56 250T70 270H835Q719 357 692 493Q692 494 692 496T691 499Q691 511 708 511H711Q720 511 723 510T729 506T732 497T735 481T743 456Q765 389 816 336T935 261Q944 258 944 250Q944 244 939 241T915 231T877 212Q836 186 806 152T761 85T740 35T732 4Q730 -6 727 -8T711 -11Q691 -11 691 0Q691 7 696 25Q728 151 835 230H70Q56 237 56 250Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(1215.5,0)"><g data-mml-node="mtext"><path data-c="2192" d="M56 237T56 250T70 270H835Q719 357 692 493Q692 494 692 496T691 499Q691 511 708 511H711Q720 511 723 510T729 506T732 497T735 481T743 456Q765 389 816 336T935 261Q944 258 944 250Q944 244 939 241T915 231T877 212Q836 186 806 152T761 85T740 35T732 4Q730 -6 727 -8T711 -11Q691 -11 691 0Q691 7 696 25Q728 151 835 230H70Q56 237 56 250Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(2431,0)"><g data-mml-node="mtext"><path data-c="2192" d="M56 237T56 250T70 270H835Q719 357 692 493Q692 494 692 496T691 499Q691 511 708 511H711Q720 511 723 510T729 506T732 497T735 481T743 456Q765 389 816 336T935 261Q944 258 944 250Q944 244 939 241T915 231T877 212Q836 186 806 152T761 85T740 35T732 4Q730 -6 727 -8T711 -11Q691 -11 691 0Q691 7 696 25Q728 151 835 230H70Q56 237 56 250Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(3646.5,0)"><g data-mml-node="mtext"><path data-c="2192" d="M56 237T56 250T70 270H835Q719 357 692 493Q692 494 692 496T691 499Q691 511 708 511H711Q720 511 723 510T729 506T732 497T735 481T743 456Q765 389 816 336T935 261Q944 258 944 250Q944 244 939 241T915 231T877 212Q836 186 806 152T761 85T740 35T732 4Q730 -6 727 -8T711 -11Q691 -11 691 0Q691 7 696 25Q728 151 835 230H70Q56 237 56 250Z"></path></g></g></g></g></svg></mjx-container></span></div>
</td></tr><tr><td id="setText"><div><code>\icon{down_arrow} \icon{red_down_arrow} \icon{down_arrow red} \icon{down_arrow color=red}</code></div>
</td><td id="setText"><div><span>↓</span> <span style="color: red;">↓</span> <span style="color: red;">↓</span> <span style="color: red;">↓</span></div>
</td><td id="setText"><div><code>\(\icon{down_arrow} \icon{red_down_arrow} \icon{down_arrow red} \icon{down_arrow color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="6.475ex" height="2.009ex" role="img" focusable="false" viewBox="0 -694 2862 888" style="vertical-align: -0.439ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mpadded"><g data-mml-node="mtext"><path data-c="2193" d="M473 86Q483 86 483 67Q483 63 483 61T483 56T481 53T480 50T478 48T474 47T470 46T464 44Q428 35 391 14T316 -55T264 -168Q264 -170 263 -173T262 -180T261 -184Q259 -194 251 -194Q242 -194 238 -176T221 -121T180 -49Q169 -34 155 -21T125 2T95 20T67 33T44 42T27 47L21 49Q17 53 17 67Q17 87 28 87Q33 87 42 84Q158 52 223 -45L230 -55V312Q230 391 230 482T229 591Q229 662 231 676T243 693Q244 694 251 694Q264 692 270 679V-55L277 -45Q307 1 353 33T430 76T473 86Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(715.5,0)"><g data-mml-node="mtext"><path data-c="2193" d="M473 86Q483 86 483 67Q483 63 483 61T483 56T481 53T480 50T478 48T474 47T470 46T464 44Q428 35 391 14T316 -55T264 -168Q264 -170 263 -173T262 -180T261 -184Q259 -194 251 -194Q242 -194 238 -176T221 -121T180 -49Q169 -34 155 -21T125 2T95 20T67 33T44 42T27 47L21 49Q17 53 17 67Q17 87 28 87Q33 87 42 84Q158 52 223 -45L230 -55V312Q230 391 230 482T229 591Q229 662 231 676T243 693Q244 694 251 694Q264 692 270 679V-55L277 -45Q307 1 353 33T430 76T473 86Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(1431,0)"><g data-mml-node="mtext"><path data-c="2193" d="M473 86Q483 86 483 67Q483 63 483 61T483 56T481 53T480 50T478 48T474 47T470 46T464 44Q428 35 391 14T316 -55T264 -168Q264 -170 263 -173T262 -180T261 -184Q259 -194 251 -194Q242 -194 238 -176T221 -121T180 -49Q169 -34 155 -21T125 2T95 20T67 33T44 42T27 47L21 49Q17 53 17 67Q17 87 28 87Q33 87 42 84Q158 52 223 -45L230 -55V312Q230 391 230 482T229 591Q229 662 231 676T243 693Q244 694 251 694Q264 692 270 679V-55L277 -45Q307 1 353 33T430 76T473 86Z"></path></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(2146.5,0)"><g data-mml-node="mtext"><path data-c="2193" d="M473 86Q483 86 483 67Q483 63 483 61T483 56T481 53T480 50T478 48T474 47T470 46T464 44Q428 35 391 14T316 -55T264 -168Q264 -170 263 -173T262 -180T261 -184Q259 -194 251 -194Q242 -194 238 -176T221 -121T180 -49Q169 -34 155 -21T125 2T95 20T67 33T44 42T27 47L21 49Q17 53 17 67Q17 87 28 87Q33 87 42 84Q158 52 223 -45L230 -55V312Q230 391 230 482T229 591Q229 662 231 676T243 693Q244 694 251 694Q264 692 270 679V-55L277 -45Q307 1 353 33T430 76T473 86Z"></path></g></g></g></g></svg></mjx-container></span></div>
</td></tr><tr><td id="setText"><div><code>\icon{circled_one} \icon{red_circled_one} \icon{circled_one red} \icon{circled_one color=red}</code></div>
</td><td id="setText"><div><span>①</span> <span style="color: red;">①</span> <span style="color: red;">①</span> <span style="color: red;">①</span></div>
</td><td id="setText"><div><code>\(\icon{circled_one} \icon{red_circled_one} \icon{circled_one red} \icon{circled_one color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="10.34ex" height="2.149ex" role="img" focusable="false" viewBox="0 -750 4570.4 950" style="vertical-align: -0.452ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mpadded"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">①</text></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(1142.6,0)"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">①</text></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(2285.2,0)"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">①</text></g></g><g data-mml-node="mpadded" fill="red" stroke="red" transform="translate(3427.8,0)"><g data-mml-node="mtext"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">①</text></g></g></g></g></svg></mjx-container></span></div>
</td></tr><tr><td id="setText"><div><code>\icon{circled_two} \icon{red_circled_two} \icon{circled_two red} \icon{circled_two color=red}</code></div>
</td><td id="setText"><div><span>②</span> <span style="color: red;">②</span> <span style="color: red;">②</span> <span style="color: red;">②</span></div>
</td><td id="setText"><div><code>\(\icon{circled_two} \icon{red_circled_two} \icon{circled_two red} \icon{circled_two color=red}\)</code></div>
</td><td id="setText"><div><span class="math-inline ">
<mjx-container class="MathJax" jax="SVG"><svg xmlns="http://www.w3.org/2000/svg" width="10.34ex" height="2.149ex" role="img" focusable="false" viewBox="0 -750 4570.4 950" style="vertical-align: -0.452ex;"><g stroke="currentColor" fill="currentColo