andatoshiki/toshiki-notebook
1
0
Fork 0
mirror of https://github.com/andatoshiki/toshiki-notebook.git synced 2026-06-06 02:46:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
c3f0d11c39
toshiki-notebook/application/markdown-it-katex/tips.html

139 lines
76 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tips to Use markdown-it-katex | Toshiki's Note</title>
<meta name="description" content="Extra tips on using markdown-it-katex for the best experiences.">
<link rel="preload stylesheet" href="/assets/style.e951b6c8.css" as="style">
<script type="module" src="/assets/app.11c168a7.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.b7580407.js">
<link rel="modulepreload" href="/assets/chunks/theme.c3ca1c74.js">
<link rel="modulepreload" href="/assets/chunks/commonjsHelpers.725317a4.js">
<link rel="modulepreload" href="/assets/chunks/PageInfo.vue_vue_type_script_setup_true_lang.250b3e56.js">
<link rel="modulepreload" href="/assets/application_markdown-it-katex_tips.md.54862db5.lean.js">
<link rel="stylesheet" href="https://cdnjs.toshiki.dev/ajax/libs/KaTeX/0.16.0/katex.min.css">
<link rel="stylesheet" href="https://cdnjs.toshiki.dev/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link rel="icon" href="https://r2.toshiki.dev/cdn/toshiki-notebook-favicon/favicon.ico">
<meta name="author" content="Anda Toshiki">
<meta name="keywords" content="Toshiki, Anda Toshiki, andatoshiki, GitHub, GitHub action, Vitepress, Vite, Notebook, Knowledge base, Programming, Programming Notes, Academic, Personal, Notebook, Productivity, Journal, Note-taking, Markdown, Notepad, Organization, Tutorial">
<meta name="google-site-verification" content="lm7PNJiYSPEx1dMast1Xptc0Vk0cU06o-daZSsIgr2I">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="theme-color" content="#3c8772">
<meta property="og:type" content="website">
<meta property="og:locale" content="en-US">
<meta property="og:title" content="Toshiki&#39;s Note">
<meta property="og:description" content="Toshiki&#39;s web notebook served via Vitepress!">
<meta property="og:site" content="https://note.toshiki.dev">
<meta property="og:site_name" content="Toshiki&#39;s Note">
<meta property="og:image" content="https://note.toshiki.dev/og-cover.png">
<script>function siteruntime(){window.setTimeout("siteruntime()",1e3),X=new Date("8/24/2021 10:28:00"),Y=new Date,T=Y.getTime()-X.getTime(),M=24*60*60*1e3,a=T/M,A=Math.floor(a),b=(a-A)*24,B=Math.floor(b),c=(b-B)*60,C=Math.floor((b-B)*60),D=Math.floor((c-C)*60),siteruntime_span.innerHTML="This site has been running for: "+A+" day(s) "+B+" hour(s) "+C+" minute(s) "+D+" second(s)"}siteruntime();</script>
<script async defer data-website-id="" src=""></script>
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-f6284a77><!--[--><!--]--><!--[--><span tabindex="-1" data-v-315fcc9b></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-315fcc9b> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f6284a77 data-v-ff202323><div class="VPNavBar has-sidebar" data-v-ff202323 data-v-57f83237><div class="container" data-v-57f83237><div class="title" data-v-57f83237><div class="VPNavBarTitle has-sidebar" data-v-57f83237 data-v-87c32abd><a class="title" href="/" data-v-87c32abd><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logos/logo.png" alt data-v-6ebf9bdf><!--]--><!--[-->Toshiki&#39;s Note<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-57f83237><div class="curtain" data-v-57f83237></div><div class="content-body" data-v-57f83237><!--[--><!--]--><div class="VPNavBarSearch search" data-v-57f83237><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-57f83237 data-v-183ec936><span id="main-nav-aria-label" class="visually-hidden" data-v-183ec936>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/development/" tabindex="0" data-v-183ec936 data-v-416f44b0><!--[--><span data-v-416f44b0>Development</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup active" data-v-183ec936 data-v-62bba1f9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-62bba1f9><span class="text" data-v-62bba1f9><!----><span data-v-62bba1f9>Academic</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-62bba1f9><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-62bba1f9><div class="VPMenu" data-v-62bba1f9 data-v-17c3596a><div class="items" data-v-17c3596a><!--[--><!--[--><div class="VPMenuGroup" data-v-17c3596a data-v-b9d0e57b><p class="title" data-v-b9d0e57b>K-12</p><!--[--><!--[--><div class="VPMenuLink" data-v-b9d0e57b data-v-ec5470f2><a class="VPLink link" href="/academic/chemistry/index" data-v-ec5470f2><!--[-->Chemistry<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b9d0e57b data-v-ec5470f2><a class="VPLink link" href="/discrete-math/index" data-v-ec5470f2><!--[-->Discrete Math.<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b9d0e57b data-v-ec5470f2><a class="VPLink link" href="/academic/literature/index" data-v-ec5470f2><!--[-->Literature<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b9d0e57b data-v-ec5470f2><a class="VPLink link" href="/academic/cis105/index" data-v-ec5470f2><!--[-->CIS105<!--]--></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-17c3596a data-v-b9d0e57b><p class="title" data-v-b9d0e57b>Tools</p><!--[--><!--[--><div class="VPMenuLink" data-v-b9d0e57b data-v-ec5470f2><a class="VPLink link" href="/academic/physics/ipho-formulas-jpn/1" data-v-ec5470f2><!--[-->Formulas for IPhO JPN.<!--]--></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuLink" data-v-17c3596a data-v-ec5470f2><span class="VPLink" data-v-ec5470f2><!--[--><!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-17c3596a data-v-ec5470f2><span class="VPLink" data-v-ec5470f2><!--[--><!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-17c3596a data-v-ec5470f2><span class="VPLink" data-v-ec5470f2><!--[--><!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-17c3596a data-v-ec5470f2><span class="VPLink" data-v-ec5470f2><!--[--><!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-17c3596a data-v-ec5470f2><span class="VPLink" data-v-ec5470f2><!--[--><!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-17c3596a data-v-ec5470f2><span class="VPLink" data-v-ec5470f2><!--[--><!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-17c3596a data-v-ec5470f2><span class="VPLink" data-v-ec5470f2><!--[--><!--]--></span></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-183ec936 data-v-62bba1f9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-62bba1f9><span class="text" data-v-62bba1f9><!----><span data-v-62bba1f9>Application</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-62bba1f9><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-62bba1f9><div class="VPMenu" data-v-62bba1f9 data-v-17c3596a><div class="items" data-v-17c3596a><!--[--><!--[--><div class="VPMenuGroup" data-v-17c3596a data-v-b9d0e57b><p class="title" data-v-b9d0e57b>Personal projects</p><!--[--><!--[--><div class="VPMenuLink" data-v-b9d0e57b data-v-ec5470f2><a class="VPLink link active" href="/application/markdown-it-katex/how-to-use" data-v-ec5470f2><!--[-->markdown-it-katex<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b9d0e57b data-v-ec5470f2><a class="VPLink link" href="/application/vitepress-plugin-shiki-twoslash/index" data-v-ec5470f2><!--[-->vitepress-plugin-shiki-twoslash<!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-183ec936 data-v-62bba1f9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-62bba1f9><span class="text" data-v-62bba1f9><!----><span data-v-62bba1f9>Save</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-62bba1f9><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-62bba1f9><div class="VPMenu" data-v-62bba1f9 data-v-17c3596a><div class="items" data-v-17c3596a><!--[--><!--[--><div class="VPMenuLink" data-v-17c3596a data-v-ec5470f2><a class="VPLink link" href="/save/reading/index" data-v-ec5470f2><!--[-->Reading<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-17c3596a data-v-ec5470f2><a class="VPLink link" href="/academic/vocabulary/index" data-v-ec5470f2><!--[-->Vocabulary<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-57f83237 data-v-dc7cad42><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-dc7cad42 data-v-65b67168 data-v-56eb52d1><span class="check" data-v-56eb52d1><span class="icon" data-v-56eb52d1><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-65b67168><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-65b67168><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-57f83237 data-v-aaebde08 data-v-8a65be56><!--[--><a class="VPSocialLink no-icon" href="https://github.com/andatoshiki" aria-label="github" target="_blank" rel="noopener" data-v-8a65be56 data-v-1b61e2c7><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://twitter.com/andatoshiki" aria-label="twitter" target="_blank" rel="noopener" data-v-8a65be56 data-v-1b61e2c7><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-57f83237 data-v-e5c8c6ca data-v-62bba1f9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-62bba1f9><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-62bba1f9><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-62bba1f9><div class="VPMenu" data-v-62bba1f9 data-v-17c3596a><!----><!--[--><!--[--><!----><div class="group" data-v-e5c8c6ca><div class="item appearance" data-v-e5c8c6ca><p class="label" data-v-e5c8c6ca>Appearance</p><div class="appearance-action" data-v-e5c8c6ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e5c8c6ca data-v-65b67168 data-v-56eb52d1><span class="check" data-v-56eb52d1><span class="icon" data-v-56eb52d1><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-65b67168><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-65b67168><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-e5c8c6ca><div class="item social-links" data-v-e5c8c6ca><div class="VPSocialLinks social-links-list" data-v-e5c8c6ca data-v-8a65be56><!--[--><a class="VPSocialLink no-icon" href="https://github.com/andatoshiki" aria-label="github" target="_blank" rel="noopener" data-v-8a65be56 data-v-1b61e2c7><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://twitter.com/andatoshiki" aria-label="twitter" target="_blank" rel="noopener" data-v-8a65be56 data-v-1b61e2c7><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-57f83237 data-v-f865e4ad><span class="container" data-v-f865e4ad><span class="top" data-v-f865e4ad></span><span class="middle" data-v-f865e4ad></span><span class="bottom" data-v-f865e4ad></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-f6284a77 data-v-a41c4a1c><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a41c4a1c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-a41c4a1c><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-a41c4a1c>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a41c4a1c data-v-44ae7a43><button data-v-44ae7a43>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-f6284a77 data-v-7ab77f34><div class="curtain" data-v-7ab77f34></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-7ab77f34><span class="visually-hidden" id="sidebar-aria-label" data-v-7ab77f34> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-7ab77f34><section class="VPSidebarItem level-0 collapsible has-active" data-v-7ab77f34 data-v-1b9f5c6f><div class="item" role="button" tabindex="0" data-v-1b9f5c6f><div class="indicator" data-v-1b9f5c6f></div><h2 class="text" data-v-1b9f5c6f>markdown-it-katex</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-1b9f5c6f><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-1b9f5c6f><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-1b9f5c6f><!--[--><div class="VPSidebarItem level-1 is-link" data-v-1b9f5c6f data-v-1b9f5c6f><div class="item" data-v-1b9f5c6f><div class="indicator" data-v-1b9f5c6f></div><a class="VPLink link link" href="/application/markdown-it-katex/how-to-use" data-v-1b9f5c6f><!--[--><p class="text" data-v-1b9f5c6f>1: How to use?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-1b9f5c6f data-v-1b9f5c6f><div class="item" data-v-1b9f5c6f><div class="indicator" data-v-1b9f5c6f></div><a class="VPLink link link" href="/application/markdown-it-katex/support-function" data-v-1b9f5c6f><!--[--><p class="text" data-v-1b9f5c6f>2: KaTeX supported functions</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-1b9f5c6f data-v-1b9f5c6f><div class="item" data-v-1b9f5c6f><div class="indicator" data-v-1b9f5c6f></div><a class="VPLink link link" href="/application/markdown-it-katex/support-table" data-v-1b9f5c6f><!--[--><p class="text" data-v-1b9f5c6f>3: KaTeX support tables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-1b9f5c6f data-v-1b9f5c6f><div class="item" data-v-1b9f5c6f><div class="indicator" data-v-1b9f5c6f></div><a class="VPLink link link" href="/application/markdown-it-katex/tips" data-v-1b9f5c6f><!--[--><p class="text" data-v-1b9f5c6f>4: Tips</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-f6284a77 data-v-f3ed2c70><div class="VPDoc has-sidebar has-aside" data-v-f3ed2c70 data-v-39e6c32d><!--[--><!--]--><div class="container" data-v-39e6c32d><div class="aside" data-v-39e6c32d><div class="aside-curtain" data-v-39e6c32d></div><div class="aside-container" data-v-39e6c32d><div class="aside-content" data-v-39e6c32d><div class="VPDocAside" data-v-39e6c32d data-v-f5b3965e><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-f5b3965e data-v-99fa007f><div class="content" data-v-99fa007f><div class="outline-marker" data-v-99fa007f></div><div class="outline-title" role="heading" aria-level="2" data-v-99fa007f>TOC</div><nav aria-labelledby="doc-outline-aria-label" data-v-99fa007f><span class="visually-hidden" id="doc-outline-aria-label" data-v-99fa007f> Table of Contents for current page </span><ul class="root" data-v-99fa007f data-v-29e3fa2f><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-f5b3965e></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--[--><!--[--><!--[--><div class="VPDocAsideSponsors"><div class="VPSponsors vp-sponsor aside"><!--[--><section class="vp-sponsor-section"><!----><div class="VPSponsorsGrid vp-sponsor-grid medium"><!--[--><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden"></h4><img class="vp-sponsor-grid-image" src="https://jsd.toshiki.dev/gh/andatoshiki/toshiki-notebook@master/assets/logo/sponsor/telegram.png"></article></a></div><!--]--></div></section><!--]--></div></div><!--]--><!--]--><!--]--><!--]--></div></div></div></div><div class="content" data-v-39e6c32d><div class="content-container" data-v-39e6c32d><!--[--><!--]--><!----><main class="main" data-v-39e6c32d><div style="position:relative;" class="vp-doc _application_markdown-it-katex_tips" data-v-39e6c32d><div><h1 id="tips-hacks" tabindex="-1">Tips &amp; Hacks <a class="header-anchor" href="#tips-hacks" aria-label="Permalink to &quot;Tips &amp; Hacks&quot;">​</a></h1><div><section class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995c0-1.224-1.47-2.74-3.153-3.145Z"></path></svg> Author:<span>Anda Toshiki</span></div><!----><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 15 15" width="1.2em" height="1.2em"><path fill="currentColor" fill-rule="evenodd" d="M1.903 7.297c0 3.044 2.207 5.118 4.686 5.547a.521.521 0 1 1-.178 1.027C3.5 13.367.861 10.913.861 7.297c0-1.537.699-2.745 1.515-3.663c.585-.658 1.254-1.193 1.792-1.602H2.532a.5.5 0 0 1 0-1h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V2.686l-.001.002c-.572.43-1.27.957-1.875 1.638c-.715.804-1.253 1.776-1.253 2.97Zm11.108.406c0-3.012-2.16-5.073-4.607-5.533a.521.521 0 1 1 .192-1.024c2.874.54 5.457 2.98 5.457 6.557c0 1.537-.699 2.744-1.515 3.663c-.585.658-1.254 1.193-1.792 1.602h1.636a.5.5 0 1 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 1 1 1 0v1.845h.002c.571-.432 1.27-.958 1.874-1.64c.715-.803 1.253-1.775 1.253-2.97Z" clip-rule="evenodd"></path></svg> Updated:<span>2 minutes ago</span></div><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.485 6.879l1.036 4.144l.997-3.655a.5.5 0 0 1 .964 0l.997 3.655l1.036-4.144a.5.5 0 0 1 .97.242l-1.5 6a.5.5 0 0 1-.967.01L8 9.402l-1.018 3.73a.5.5 0 0 1-.967-.01l-1.5-6a.5.5 0 1 1 .97-.242z"></path></svg> Words:<span>1.2k</span></div><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 20 20" width="1.2em" height="1.2em"><path fill="currentColor" d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm2.5 14.5L9 11V4h2v6l3 3z"></path></svg> Reading:<span>7 min</span></div></section></div><h2 id="_1-responsive-katex-styling" tabindex="-1">1: Responsive KaTeX Styling <a class="header-anchor" href="#_1-responsive-katex-styling" aria-label="Permalink to &quot;1: Responsive KaTeX Styling&quot;">​</a></h2><h3 id="_1-1-issue-background" tabindex="-1">1.1: Issue background <a class="header-anchor" href="#_1-1-issue-background" aria-label="Permalink to &quot;1.1: Issue background&quot;">​</a></h3><p>KaTeX works out of the box on large screen devices such as laptops and desktop computers. But as KaTeX&#39;s built-in does not support responsiveness on it&#39;s default stylings, hence KaTeX equations might overflow out of the default width of the default application containers on small-screened mobile devices as you can see in the following image in the dev tool of chrome, when the dimension of the webpage is set to responsive or under a certain fixed device dimension, the equations rendered in KaTeX overflows out of the viewport as inspected in blue hightlight.</p><p><figure><img src="/assets/2023-03-22-17-04-25.d7c4c068.png" alt="katex overflowing on small screen devices" title="katex overflowing on small screen devices"><figcaption align="center"><small>◎ katex overflowing on small screen devices</small></figcaption></figure></p><p>This inevitably causes the viewport to break and extends the default width for KaTeX equations <code>&lt;div&gt;</code> to fit, users will be required to manually scroll right in order to view the full equation consequently as follows,</p><p><figure><img src="/assets/2023-03-22-20-29-28.39883b7f.png" alt="katex overflowing with labels annotated" title="katex overflowing with labels annotated"><figcaption align="center"><small>◎ katex overflowing with labels annotated</small></figcaption></figure></p><p>The above situation is undoubtedly annoying for user experiences while reading documentation, consider at what scenarios users have to scroll, scroll and scroll only for viewing a single long-blocked equation, who would want to read such a text, right? But don&#39;t worry we have a simple fix for this situation via by several line of css.</p><h3 id="_1-2-temporary-solution" tabindex="-1">1.2: Temporary solution <a class="header-anchor" href="#_1-2-temporary-solution" aria-label="Permalink to &quot;1.2: Temporary solution&quot;">​</a></h3><p>If you happened to search over KaTeX&#39;s official repo issue tracker on GitHub, there are several user-made css tweaks hack already, the fix is simple by adjusting the overflows of both x and y axes of the KaTeX render <code>&lt;div&gt;</code> blocks. The <code>katex-display &gt; .katex</code> selector targets the child element of the <code>.katex-display</code> class that has the <code>.katex</code> class. This is the element that contains the KaTeX math expression. The first block of styles is mostly concerned with making sure that the KaTeX expression doesn&#39;t overflow its container and can be scrolled horizontally if needed. The second block of styles sets the font and line-height for the KaTeX expression and makes sure that its text is properly indented.</p><p><a href="https://github.com/KaTeX/KaTeX/issues/327" target="_blank" rel="noreferrer">@preview</a></p><p>But, the issue here is, the overflowing issue is resolved on the webpage, but the style itself left with a slight whitish &quot;box&quot; at the crossing corner of both horizontal as well as vertical scrollbar tracks, this might not be so explicit in the light mode of the webpage, but when it turns to dark mode, the box become annoying. Some people might say it&#39;s an easy tweak via setting the display property of the &quot;box&quot; element to <code>display: none;</code> to directly remove the box out of the page, this is a smart approach; however, while the box is gone, the two crossing tracks is going to form an untouched invisible box again against two bars without color. Thus, neither ways seems to perfectly solve the problem.</p><h3 id="_1-3-finding-solution" tabindex="-1">1.3: Finding solution <a class="header-anchor" href="#_1-3-finding-solution" aria-label="Permalink to &quot;1.3: Finding solution&quot;">​</a></h3><p>After running a quick research on Google, I found a simple hack tweak used in a theme of VuePress, <a href="https://github.com/vuepress-theme-hope/vuepress-theme-hope" target="_blank" rel="noreferrer">vuepress-theme-hope</a> on GitHub, the theme both integrate with KaTeX and MathJax for math supports.</p><p><a href="https://github.com/vuepress-theme-hope/vuepress-theme-hope" target="_blank" rel="noreferrer">@preview</a></p><p>Under the styles directory of the repository, several line of scss styles came across my eyes,</p><p><figure><img src="/assets/2023-05-22-10-14-11.2c283da4.png" alt="KaTeX tweak fix styles in theme" title="KaTeX tweak fix styles in theme"><figcaption align="center"><small>◎ KaTeX tweak fix styles in theme</small></figcaption></figure></p><p>this scss lines only add a horizontal trackbar at the bottom of each overflowing equation while maximizing the vertical height of the equation, when user is on a small screened device as follows,</p><p><figure><img src="/assets/2023-05-22-10-27-47.c0db4fe7.png" alt="Horizontal scrollbar of equations on small screens" title="Horizontal scrollbar of equations on small screen"><figcaption align="center"><small>◎ Horizontal scrollbar of equations on small screen</small></figcaption></figure></p><p>Consequently, the fix is easy.</p><h3 id="_1-4-solution" tabindex="-1">1.4: Solution <a class="header-anchor" href="#_1-4-solution" aria-label="Permalink to &quot;1.4: Solution&quot;">​</a></h3><p>If you are running a documentation site like this version controlled via Node, especially VitePress without native scss supports, your fix would be installing scss support globally across the project, then add the scss styles and finally import the stylesheets to take effect globally.</p><p>Install global scss support using your favored package manager.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-LIEPs" id="tab-WJi5Gmw" checked="checked"><label for="tab-WJi5Gmw">npm</label><input type="radio" name="group-LIEPs" id="tab-Hwri5wB"><label for="tab-Hwri5wB">yarn</label><input type="radio" name="group-LIEPs" id="tab-rFpgxwZ"><label for="tab-rFpgxwZ">pnpm</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark-dimmed vp-code-dark"><code><span class="line"><span style="color:#F69D50;">$</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">npm</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">install</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">-D</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">scss</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">$</span><span style="color:#24292E;"> </span><span style="color:#032F62;">npm</span><span style="color:#24292E;"> </span><span style="color:#032F62;">install</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">-D</span><span style="color:#24292E;"> </span><span style="color:#032F62;">scss</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark-dimmed vp-code-dark"><code><span class="line"><span style="color:#F69D50;">$</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">yarn</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">add</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">--dev</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">scss</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">$</span><span style="color:#24292E;"> </span><span style="color:#032F62;">yarn</span><span style="color:#24292E;"> </span><span style="color:#032F62;">add</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">--dev</span><span style="color:#24292E;"> </span><span style="color:#032F62;">scss</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark-dimmed vp-code-dark"><code><span class="line"><span style="color:#F69D50;">$</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">pnpm</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">add</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">-D</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">scss</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">$</span><span style="color:#24292E;"> </span><span style="color:#032F62;">pnpm</span><span style="color:#24292E;"> </span><span style="color:#032F62;">add</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">-D</span><span style="color:#24292E;"> </span><span style="color:#032F62;">scss</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><p>Then in your scss stylesheets, add the following and link or import them to your global styles, you should be off to go with a complete fix-up for KaTeX.</p><div class="language-scss vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki github-dark-dimmed vp-code-dark"><code><span class="line"><span style="color:#ADBAC7;">...</span></span>
<span class="line"></span>
<span class="line"><span style="color:#768390;">// katex responsiveness fix</span></span>
<span class="line"><span style="color:#6CB6FF;">.katex</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">font-size</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">1.05</span><span style="color:#F47067;">em</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">direction</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">ltr</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6CB6FF;">.katex-display</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">overflow</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">auto</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">hidden</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">-webkit-overflow-scrolling</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">touch</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">padding-top</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">0.2</span><span style="color:#F47067;">em</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">padding-bottom</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">0.2</span><span style="color:#F47067;">em</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#8DDB8C;">&amp;</span><span style="color:#6CB6FF;">::-webkit-scrollbar</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">height</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">3</span><span style="color:#F47067;">px</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">.katex</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">font-size</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">1.21</span><span style="color:#F47067;">em</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6CB6FF;">.katex-error</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">color</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">#f00</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#768390;">// katex responsiveness fix ends</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ADBAC7;">...</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">...</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">// katex responsiveness fix</span></span>
<span class="line"><span style="color:#6F42C1;">.katex</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">font-size</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">1.05</span><span style="color:#D73A49;">em</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">direction</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">ltr</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6F42C1;">.katex-display</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">overflow</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">auto</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">hidden</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">-webkit-overflow-scrolling</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">touch</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">padding-top</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">0.2</span><span style="color:#D73A49;">em</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">padding-bottom</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">0.2</span><span style="color:#D73A49;">em</span><span style="color:#24292E;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#22863A;">&amp;</span><span style="color:#6F42C1;">::-webkit-scrollbar</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">height</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">3</span><span style="color:#D73A49;">px</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">.katex</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">font-size</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">1.21</span><span style="color:#D73A49;">em</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> }</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6F42C1;">.katex-error</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#f00</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#6A737D;">// katex responsiveness fix ends</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">...</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p>Next, import your styles globally to take effect,</p><div class="language-scss vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki github-dark-dimmed vp-code-dark"><code><span class="line"><span style="color:#F47067;">@import</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&#39;&lt;your-scss-file&gt;.scss&#39;</span><span style="color:#ADBAC7;">;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">@import</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;&lt;your-scss-file&gt;.scss&#39;</span><span style="color:#24292E;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h4 id="_1-4-1-fix-explanation" tabindex="-1">1.4.1: Fix Explanation <a class="header-anchor" href="#_1-4-1-fix-explanation" aria-label="Permalink to &quot;1.4.1: Fix Explanation&quot;">​</a></h4><p>The first section sets the base styles for all KaTeX elements by increasing the font size slightly and ensuring that the text direction is left to right.</p><p>The second section of code targets the KaTeX display elements specifically. This section adds a bit of padding to the top and bottom of the display elements and sets overflow to auto hidden, which allows the content to scroll inside the container horizontally if it overflows the container&#39;s width. The <code>-webkit-overflow-scrolling</code> property is added to ensure smooth scrolling on mobile devices.</p><p>Additionally, this section contains a nested <code>.katex selector</code>, which increases the font size of the KaTeX elements within the display element.</p><p>The third section targets the <code>.katex-error</code> class and sets the color to red to indicate that there is an error in rendering the LaTeX expression.</p><h3 id="_1-5-what-if-i-don-t-have-scss" tabindex="-1">1.5: What if I Don&#39;t Have SCSS? <a class="header-anchor" href="#_1-5-what-if-i-don-t-have-scss" aria-label="Permalink to &quot;1.5: What if I Don&#39;t Have SCSS?&quot;">​</a></h3><p>If you do not have native scss support for your site, such as a static HTML based documentation site or content management site builder such as Wiki.JS that works as an SaaS which only allows users to apply custom stylesheets within slots provided and make effects, you could use some scss to css converter online with options follows,</p><ul><li><a href="https://jsonformatter.org" target="_blank" rel="noreferrer">@preview</a></li><li><a href="https://json2csharp.com" target="_blank" rel="noreferrer">@preview</a></li></ul><p>to precompile from source scss into normal css styles and use them based on your needs, below are auto-generated compiled css, <strong>ONLY take it as reference</strong>, I do not guarantee the usability.</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark-dimmed vp-code-dark"><code><span class="line"><span style="color:#6CB6FF;">.katex</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">font-size</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">1.05</span><span style="color:#F47067;">em</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">direction</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">ltr</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6CB6FF;">.katex-display</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">overflow</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">auto</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">hidden</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">-webkit-overflow-scrolling</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">touch</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">padding-top</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">0.2</span><span style="color:#F47067;">em</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">padding-bottom</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">0.2</span><span style="color:#F47067;">em</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#6CB6FF;">.katex-display::-webkit-scrollbar</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">height</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">3</span><span style="color:#F47067;">px</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#6CB6FF;">.katex-display</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">.katex</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">font-size</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">1.21</span><span style="color:#F47067;">em</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6CB6FF;">.katex-error</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">color</span><span style="color:#ADBAC7;">: </span><span style="color:#6CB6FF;">#f00</span><span style="color:#ADBAC7;">;</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">.katex</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">font-size</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">1.05</span><span style="color:#D73A49;">em</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">direction</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">ltr</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6F42C1;">.katex-display</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">overflow</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">auto</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">hidden</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">-webkit-overflow-scrolling</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">touch</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">padding-top</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">0.2</span><span style="color:#D73A49;">em</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">padding-bottom</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">0.2</span><span style="color:#D73A49;">em</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#6F42C1;">.katex-display::-webkit-scrollbar</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">height</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">3</span><span style="color:#D73A49;">px</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#6F42C1;">.katex-display</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">.katex</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">font-size</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">1.21</span><span style="color:#D73A49;">em</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6F42C1;">.katex-error</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">color</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">#f00</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>To be continued.</p><div class="info custom-block"><p class="custom-block-title">Reference</p><ul><li><a href="https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/docs/theme/src/.vuepress/components/toggle-rtl-button.scss" target="_blank" rel="noreferrer">vuepress-theme-hope/docs/theme/src/.vuepress/components/toggle-rtl-button.scss</a></li><li><a href="https://chat.toshiki.dev" target="_blank" rel="noreferrer">Toshiki&#39;s ChaGPT</a></li></ul></div></div></div></main><footer class="VPDocFooter" data-v-39e6c32d data-v-bae355c8><!--[--><!--[--><!--[--><!--[--><!----><!--]--><!--]--><!--]--><!--]--><div class="edit-info" data-v-bae355c8><div class="edit-link" data-v-bae355c8><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/andatoshiki/toshiki-notebook/edit/master/docs/application/markdown-it-katex/tips.md" target="_blank" rel="noreferrer" data-v-bae355c8><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-bae355c8><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page on GitHub<!--]--></a></div><div class="last-updated" data-v-bae355c8><p class="VPLastUpdated" data-v-bae355c8 data-v-ec8405ef>Last updated: <time datetime="2024-04-04T18:13:54.000Z" data-v-ec8405ef></time></p></div></div><nav class="prev-next" data-v-bae355c8><div class="pager" data-v-bae355c8><a class="pager-link prev" href="/application/markdown-it-katex/support-table" data-v-bae355c8><span class="desc" data-v-bae355c8>Previous page</span><span class="title" data-v-bae355c8>3: KaTeX support tables</span></a></div><div class="pager" data-v-bae355c8><!----></div></nav></footer><!--[--><!--[--><!--[--><div id="comment-container"></div><!--]--><!--]--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-f6284a77 data-v-b69a1592><div class="container" data-v-b69a1592><p class="message" data-v-b69a1592>Wrote with <i class="heart fa fa-heart fa-xs fa-beat"></i> and <i class="coffee fa fa-coffee fa-xs" aria-hidden="true"></i> by <a href="https://toshiki.dev">Anda Toshiki</a> at <code>root@andatoshiki:/~</code></p><p class="copyright" data-v-b69a1592>Copyright © 2023-2024 <a href="https://github.com/andatoshiki">Anda Toshiki</a>, <a href="https://github.com/lolilab">LoliLab</a> and <a href="https://github.com/toshikidev">Toshiki Dev</a> present <br /><span id="siteruntime_span"></span></p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"academic_chemistry_index.md\":\"f4e854f2\",\"academic_chemistry_problems_03-02-2.md\":\"2623fe59\",\"academic_cis105_cis105-l3-lecture-note.md\":\"f3bb6e2c\",\"academic_physics_ipho-formulas-jpn_12.md\":\"5fb4b5ec\",\"academic_physics_ipho-formulas-jpn_8.md\":\"5cbb7b79\",\"academic_cis105_cis105-l10-lecture-note.md\":\"7026fd99\",\"academic_chemistry_problems_02-20.md\":\"4b8aa210\",\"academic_cis105_cis105-l12-lecture-note.md\":\"029a50a0\",\"academic_cis105_cis105-l1-lecture-note.md\":\"2103f295\",\"academic_physics_ipho-formulas-jpn_2.md\":\"4f1fdf90\",\"academic_cis105_cis105-l6-pt2-lecture-note.md\":\"01841fcb\",\"academic_cis105_index.md\":\"8a9cfaf8\",\"academic_physics_ipho-formulas-jpn_5.md\":\"9b72791c\",\"academic_physics_ipho-formulas-jpn_6.md\":\"a713bfcf\",\"academic_cis105_cis105-l13-lecture-note.md\":\"207edf6d\",\"academic_physics_index.md\":\"cbf8d3a6\",\"academic_physics_ipho-formulas-jpn_11.md\":\"b31714be\",\"academic_cis105_cis105-l8-lecture-note.md\":\"66aa4517\",\"development_aws_license.md\":\"d7656eec\",\"development_aws_scientific-computing.md\":\"4562b05e\",\"development_aws_serverless.md\":\"0bb19169\",\"save_reading_index.md\":\"2b36f46d\",\"save_reading_outliers_1.md\":\"89d20dc9\",\"application_vitepress-plugin-shiki-twoslash_guide_markdown-extensions.md\":\"9e47c9f5\",\"application_vitepress-plugin-shiki-twoslash_api_annotations.md\":\"3829e1bd\",\"application_vitepress-plugin-shiki-twoslash_api_cutting.md\":\"f5e2154f\",\"save_reading_outliers_3.md\":\"1de16c5e\",\"save_reading_outliers_4.md\":\"a86cde03\",\"application_markdown-it-katex_tips.md\":\"54862db5\",\"application_vitepress-plugin-shiki-twoslash_api_types.md\":\"dccf6907\",\"application_vitepress-plugin-shiki-twoslash_index.md\":\"e4bb45ab\",\"academic_literature_writing_methods-of-development.md\":\"38eeb462\",\"development_aws_acknowledgement.md\":\"eb9dc530\",\"development_aws_appendix.md\":\"d4130384\",\"academic_chemistry_problems_03-02-3.md\":\"d0b76b50\",\"development_aws_author.md\":\"b89fcf2c\",\"application_vitepress-plugin-shiki-twoslash_guide_custom-theme.md\":\"1c70ef9f\",\"development_aws_closing.md\":\"6ec841c7\",\"development_aws_cloud.md\":\"7d952bec\",\"development_aws_aws-batch.md\":\"9558a046\",\"academic_cis105_cis105-l2-lecture-note.md\":\"90610c07\",\"development_aws_assignments.md\":\"45cf76cc\",\"academic_cis105_cis105-l14-lecture-note.md\":\"66957f01\",\"academic_cis105_cis105-l5-lecture-note.md\":\"6f07646f\",\"academic_cis105_cis105-l9-lecture-note.md\":\"3963ad7b\",\"development_aws_handson-jupyter.md\":\"693e93d5\",\"academic_cis105_cis105-l4-lecture-note.md\":\"71bbc2e7\",\"save_reading_outliers_2.md\":\"8d8efb8d\",\"academic_cis105_cis105-l11-lecture-note.md\":\"8f419e29\",\"academic_cis105_cis105-l6-pt1-lecture-note.md\":\"bb497b8d\",\"application_vitepress-plugin-shiki-twoslash_api_emit.md\":\"bb2efbdf\",\"academic_physics_ipho-formulas-jpn_4.md\":\"2793449a\",\"application_vitepress-plugin-shiki-twoslash_api_errors.md\":\"b074b42d\",\"academic_chemistry_notes_12-5.md\":\"04402648\",\"application_vitepress-plugin-shiki-twoslash_api_includes.md\":\"c65a0971\",\"academic_physics_ipho-formulas-jpn_9.md\":\"7bb16196\",\"roadmap.md\":\"69474a08\",\"academic_physics_ipho-formulas-jpn_3.md\":\"5b3693de\",\"development_aws_handson-ec2.md\":\"15f69d31\",\"development_proxy4shell-terminal.md\":\"228c265c\",\"development_git-push-authentication-failed.md\":\"e77b6ec9\",\"development_aws_docker-system.md\":\"03490623\",\"development_aws_webserver.md\":\"f587b65b\",\"development_file-naming-convention.md\":\"44bcecde\",\"development_aws_aws-get-started.md\":\"b86415ac\",\"development_aws_handson-bashoutter.md\":\"f43c6909\",\"javascript_notes_1_1-1.md\":\"f48c29c3\",\"development_aws_index.md\":\"c64d215f\",\"application_vitepress-plugin-shiki-twoslash_api_multi-file.md\":\"593764e1\",\"development_rclone-for-r2.md\":\"1cd9c5b2\",\"academic_physics_ipho-formulas-jpn_13.md\":\"f7bd9c37\",\"application_vitepress-plugin-shiki-twoslash_api_logging.md\":\"5c425b52\",\"index.md\":\"13eec1b6\",\"academic_cis105_cis105-l7-lecture-note.md\":\"815c8e46\",\"academic_vocabulary_2023_02_2023-02-27.md\":\"f4c3237c\",\"academic_physics_ipho-formulas-jpn_10.md\":\"0968663d\",\"academic_chemistry_problems_03-02-1.md\":\"f0cad154\",\"academic_literature_index.md\":\"cfe27f7a\",\"application_vitepress-plugin-shiki-twoslash_config_flags.md\":\"66ec05e2\",\"application_vitepress-plugin-shiki-twoslash_config_reference.md\":\"1dd8e519\",\"development_aws_handson-qabot.md\":\"ce94f177\",\"academic_physics_ipho-formulas-jpn_1.md\":\"24af430f\",\"development_aws_main.md\":\"a908d3b7\",\"jp_index.md\":\"06b2cb69\",\"javascript_notes_1_1-2.md\":\"55b02277\",\"academic_physics_ipho-formulas-jpn_7.md\":\"d2bd7c37\",\"development_aws_handson-serverless.md\":\"25b2fda7\",\"academic_vocabulary_index.md\":\"9e428a60\",\"application_markdown-it-katex_how-to-use.md\":\"7f73e7f5\",\"application_vitepress-plugin-shiki-twoslash_api_queries.md\":\"d4be3751\",\"application_markdown-it-katex_support-function.md\":\"52dd02e5\",\"application_markdown-it-katex_support-table.md\":\"849c9911\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Toshiki's Note\",\"description\":\"Toshiki's web notebook served via Vitepress!\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Development\",\"link\":\"/development/\"},{\"text\":\"Academic\",\"items\":[{\"text\":\"K-12\",\"items\":[{\"text\":\"Chemistry\",\"link\":\"/academic/chemistry/index\",\"activeMatch\":\"/academic/chemistry/\"},{\"text\":\"Discrete Math.\",\"link\":\"/discrete-math/index\",\"activeMatch\":\"/categories/fragments/\"},{\"text\":\"Literature\",\"link\":\"/academic/literature/index\",\"activeMatch\":\"/academic/literature/\"},{\"text\":\"CIS105\",\"link\":\"/academic/cis105/index\",\"activeMatch\":\"/academic/cis105/\"}]},{\"text\":\"Tools\",\"items\":[{\"text\":\"Formulas for IPhO JPN.\",\"link\":\"/academic/physics/ipho-formulas-jpn/1\",\"activeMatch\":\"/academic/physics/ipho-formulas-jpn/\"}]},{\"text\":\"\",\"link\":\"\",\"activeMatch\":\"\"},{\"text\":\"\",\"link\":\"\",\"activeMatch\":\"\"},{\"text\":\"\",\"link\":\"\",\"activeMatch\":\"\"},{\"text\":\"\",\"link\":\"\",\"activeMatch\":\"\"},{\"text\":\"\",\"link\":\"\",\"activeMatch\":\"\"},{\"text\":\"\",\"link\":\"\",\"activeMatch\":\"\"},{\"text\":\"\",\"link\":\"\",\"activeMatch\":\"\"}],\"activeMatch\":\"/academic/\"},{\"text\":\"Application\",\"items\":[{\"text\":\"Personal projects\",\"items\":[{\"text\":\"markdown-it-katex\",\"link\":\"/application/markdown-it-katex/how-to-use\",\"activeMatch\":\"/application/markdown-it-katex/\"},{\"text\":\"vitepress-plugin-shiki-twoslash\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/index\",\"activeMatch\":\"/application/vitepress-plugin-shiki-twoslash/index\"}]}],\"activeMatch\":\"/save/\"},{\"text\":\"Save\",\"items\":[{\"text\":\"Reading\",\"link\":\"/save/reading/index\",\"activeMatch\":\"/save/reading/\"},{\"text\":\"Vocabulary\",\"link\":\"/academic/vocabulary/index\",\"activeMatch\":\"/academic/vocabulary/\"}],\"activeMatch\":\"/save/\"}],\"sidebar\":{\"/development/\":[{\"text\":\"Notes & Issues\",\"collapsed\":false,\"items\":[{\"text\":\"File Naming Convention\",\"link\":\"/development/file-naming-convention\"},{\"text\":\"RClone for R2\",\"link\":\"/development/rclone-for-r2\"},{\"text\":\"Proxies Configuration for Shells & Terminal\",\"link\":\"/development/proxy4shell-terminal\"},{\"text\":\"Git push results in \\\"Authentication Failed\\\"\",\"link\":\"/development/git-push-authentication-failed\"}]},{\"text\":\"コードで学ぶAWS入門\",\"collapsed\":false,\"items\":[{\"text\":\"背景\",\"link\":\"/development/aws/index\"},{\"text\":\"はじめに！\",\"link\":\"/development/aws/main\"},{\"text\":\"クラウド概論\",\"link\":\"/development/aws/cloud.md\"},{\"text\":\"AWS 入門\",\"link\":\"/development/aws/aws-get-started\"},{\"text\":\"Hands-on 1: 初めての EC2 インスタンスを起動する\",\"link\":\"/development/aws/handson-ec2.md\"},{\"text\":\"クラウドで行う科学計算・機械学習\",\"link\":\"/development/aws/scientific-computing.md\"},{\"text\":\"Hands-on 2: AWS でディープラーニングを実践\",\"link\":\"/development/aws/handson-ec2.md\"},{\"text\":\"Docker 入門\",\"link\":\"/development/aws/docker-system\"},{\"text\":\"Hands-on 3: AWS で自動質問回答ボットを走らせる\",\"link\":\"/development/aws/handson-qabot\"},{\"text\":\"Hands-on 4: AWS Batch を使って機械学習のハイパーパラメータサーチを並列化する\",\"link\":\"/development/aws/aws-batch\"},{\"text\":\"Web サービスの作り方\",\"link\":\"/development/aws/webserver\"},{\"text\":\"Serverless architecture\",\"link\":\"/development/aws/serverless\"},{\"text\":\"Hands-on 5: サーバーレス入門\",\"link\":\"/development/aws/handson-serverless\"},{\"text\":\"Hands-on 6: Bashoutter\",\"link\":\"/development/aws/handson-bashoutter\"},{\"text\":\"まとめ\",\"link\":\"/development/aws/closing\"},{\"text\":\"ppendix: 環境構築\",\"link\":\"/development/aws/appendix\"},{\"text\":\"謝辞\",\"link\":\"/development/aws/acknowledgement\"}]}],\"/academic/chemistry/\":[{\"text\":\"Textbook\",\"collapsed\":true,\"items\":[{\"text\":\"12-5: Reaction Mechanism\",\"link\":\"/academic/chemistry/notes/12-5\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"}]},{\"text\":\"Kinetics\",\"collapsed\":false,\"items\":[{\"text\":\"Rate determining steps\",\"link\":\"/academic/chemistry/notes/kinetics/rate-determining-step\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"}]},{\"text\":\"Problems & Solutions\",\"collapsed\":true,\"items\":[{\"text\":\"Problem: 02-20\",\"link\":\"/academic/chemistry/problems/02-20\"},{\"text\":\"Problem: 03-02-1\",\"link\":\"/academic/chemistry/problems/03-02-1\"},{\"text\":\"Problem: 03-02-2\",\"link\":\"/academic/chemistry/problems/03-02-2\"},{\"text\":\"Problem: 03-02-3\",\"link\":\"/academic/chemistry/problems/03-02-3\"}]}],\"/academic/physics\":[{\"text\":\"IPhO Formulas: JP Ver.\",\"collapsed\":false,\"items\":[{\"text\":\"1: 数学\",\"link\":\"/academic/physics/ipho-formulas-jpn/1\"},{\"text\":\"2: 一般的な推奨事\",\"link\":\"/academic/physics/ipho-formulas-jpn/2\"},{\"text\":\"3: 運動学\",\"link\":\"/academic/physics/ipho-formulas-jpn/3\"},{\"text\":\"4: 力学\",\"link\":\"/academic/physics/ipho-formulas-jpn/4\"},{\"text\":\"5: 振動と波\",\"link\":\"/academic/physics/ipho-formulas-jpn/5\"},{\"text\":\"6: 幾何光学，測光\",\"link\":\"/academic/physics/ipho-formulas-jpn/6\"},{\"text\":\"7: 波動光学\",\"link\":\"/academic/physics/ipho-formulas-jpn/7\"},{\"text\":\"8: 電気回路\",\"link\":\"/academic/physics/ipho-formulas-jpn/8\"},{\"text\":\"9: 電磁気学\",\"link\":\"/academic/physics/ipho-formulas-jpn/9\"},{\"text\":\"10: 熱力\",\"link\":\"/academic/physics/ipho-formulas-jpn/10\"},{\"text\":\"11: 量子力学\",\"link\":\"/academic/physics/ipho-formulas-jpn/11\"},{\"text\":\"12: Keplerの法則\",\"link\":\"/academic/physics/ipho-formulas-jpn/12\"},{\"text\":\"13: 相対性理論\",\"link\":\"/academic/physics/ipho-formulas-jpn/13\"}]}],\"/academic/cis105/\":[{\"text\":\"CIS 105: Computer Applications and Information Technology\",\"collapsed\":false,\"items\":[{\"text\":\"Course Overview & Schedule\",\"link\":\"/academic/cis105/index\"},{\"text\":\"Lect 1: Everything Changes\",\"link\":\"/academic/cis105/cis105-l1-lecture-note\"},{\"text\":\"Lect 2: Application Software\",\"link\":\"/academic/cis105/cis105-l2-lecture-note\"},{\"text\":\"Lect 3: Computer Hardware\",\"link\":\"/academic/cis105/cis105-l3-lecture-note\"},{\"text\":\"Lect 4: Formulas and Functions\",\"link\":\"/academic/cis105/cis105-l4-lecture-note\"},{\"text\":\"Lect 5: Operating System\",\"link\":\"/academic/cis105/cis105-l5-lecture-note\"},{\"text\":\"Lect 6 Pt 1: System Software\",\"link\":\"/academic/cis105/cis105-l6-pt1-lecture-note\"},{\"text\":\"Lect 6 Pt 2: Logical Functions\",\"link\":\"/academic/cis105/cis105-l6-pt2-lecture-note\"},{\"text\":\"Lect 7: Green Business Computing\",\"link\":\"/academic/cis105/cis105-l7-lecture-note\"},{\"text\":\"Lect 8: Green Computer Networks\",\"link\":\"/academic/cis105/cis105-l8-lecture-note\"},{\"text\":\"Lect 9: Internet\",\"link\":\"/academic/cis105/cis105-l9-lecture-note\"},{\"text\":\"Lect 10: Business Websites\",\"link\":\"/academic/cis105/cis105-l10-lecture-note\"},{\"text\":\"Lect 11: Computer Security\",\"link\":\"/academic/cis105/cis105-l11-lecture-note\"},{\"text\":\"Lect 12: Introduction to SQL\",\"link\":\"/academic/cis105/cis105-l12-lecture-note\"},{\"text\":\"Lect 13: Information Systems in Business\",\"link\":\"/academic/cis105/cis105-l13-lecture-note\"},{\"text\":\"Lect 14: More SQL Statements\",\"link\":\"/academic/cis105/cis105-l14-lecture-note\"}]}],\"/academic/vocabulary/\":[{\"text\":\"Vocabulary\",\"collapsed\":true,\"items\":[{\"text\":\"2023-02-27\",\"link\":\"/academic/vocabulary/2023/02/2023-02-27\"}]}],\"/academic/literature/\":[{\"text\":\"Writing Resources\",\"collapsed\":true,\"items\":[{\"text\":\"Patterns of Organization and Methods of Development\",\"link\":\"/academic/literature/writing/methods-of-development\"}]}],\"/javascript/\":[{\"text\":\"1: Basic JavaScript-Value, Variables, and Control Flow\",\"collapsed\":true,\"items\":[{\"text\":\"1-1: Numbers\",\"link\":\"/javascript/notes/1/1-1\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"},{\"text\":\"\",\"link\":\"\"}]}],\"/save/reading/\":[{\"text\":\"Outliers\",\"collapsed\":true,\"items\":[{\"text\":\"Introduction & Chapter 1: The Roseto Mystery\",\"link\":\"/save/reading/outliers/1\"},{\"text\":\"Chapter 2: The 10,000-Hour Rule\",\"link\":\"/save/reading/outliers/2\"},{\"text\":\"Chapter 3: The Trouble with Geniuses, Part 1\",\"link\":\"/save/reading/outliers/3\"},{\"text\":\"Chapter 4: The Trouble with Geniuses, Part 2\",\"link\":\"/save/reading/outliers/4\"}]}],\"/application/markdown-it-katex/\":[{\"text\":\"markdown-it-katex\",\"collapsed\":false,\"items\":[{\"text\":\"1: How to use?\",\"link\":\"/application/markdown-it-katex/how-to-use\"},{\"text\":\"2: KaTeX supported functions\",\"link\":\"/application/markdown-it-katex/support-function\"},{\"text\":\"3: KaTeX support tables\",\"link\":\"/application/markdown-it-katex/support-table\"},{\"text\":\"4: Tips\",\"link\":\"/application/markdown-it-katex/tips\"}]}],\"/application/vitepress-plugin-shiki-twoslash/\":[{\"text\":\"Guide\",\"collapsed\":false,\"items\":[{\"text\":\"Getting Started\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/\"},{\"text\":\"Markdown Extensions\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/guide/markdown-extensions\"},{\"text\":\"Using a Custom Theme\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/guide/custom-theme\"}]},{\"text\":\"Features\",\"collapsed\":false,\"items\":[{\"text\":\"Queries\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/api/queries\"},{\"text\":\"Errors\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/api/errors\"},{\"text\":\"Emit\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/api/emit\"},{\"text\":\"Cutting\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/api/cutting\"},{\"text\":\"Multi-file\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/api/multi-file\"},{\"text\":\"@types\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/api/types\"},{\"text\":\"Meta Annotations\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/api/annotations\"},{\"text\":\"Logging\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/api/logging\"},{\"text\":\"Includes\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/api/includes\"}]},{\"text\":\"Config\",\"collapsed\":false,\"items\":[{\"text\":\"Reference\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/config/reference\"},{\"text\":\"Compiler Flags\",\"link\":\"/application/vitepress-plugin-shiki-twoslash/config/flags\"}]}]},\"footer\":{\"copyright\":\"Copyright © 2023-2024 <a href=\\\"https://github.com/andatoshiki\\\">Anda Toshiki</a>, <a href=\\\"https://github.com/lolilab\\\">LoliLab</a> and <a href=\\\"https://github.com/toshikidev\\\">Toshiki Dev</a> present <br /><span id=\\\"siteruntime_span\\\"></span>\",\"message\":\"Wrote with <i class=\\\"heart fa fa-heart fa-xs fa-beat\\\"></i> and <i class=\\\"coffee fa fa-coffee fa-xs\\\" aria-hidden=\\\"true\\\"></i> by <a href=\\\"https://toshiki.dev\\\">Anda Toshiki</a> at <code>root@andatoshiki:/~</code>\"},\"logo\":\"/logos/logo.png\",\"outline\":\"deep\",\"outlineTitle\":\"TOC\",\"outlineBadges\":false,\"lastUpdatedText\":\"Last updated\",\"algolia\":{\"appId\":\"G9IUR45K98\",\"apiKey\":\"8528cc91281d8112b28f508317a96dd3\",\"indexName\":\"toshiki-notebook\"},\"editLink\":{\"pattern\":\"https://github.com/andatoshiki/toshiki-notebook/edit/master/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/andatoshiki\"},{\"icon\":\"twitter\",\"link\":\"https://twitter.com/andatoshiki\"}]},\"locales\":{\"/\":{\"label\":\"English\",\"lang\":\"en-US\"},\"/jp/\":{\"label\":\"Japanese\",\"title\":\"Vue Test Utils\",\"lang\":\"jp-JP\",\"description\":\"La documentation officielle de Vue Test Utils\"}},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink