<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" href="atom.xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://www.hikari-dev.com/en/blog</id>
    <title>Hikari's Notebook Blog</title>
    <updated>2026-04-19T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://www.hikari-dev.com/en/blog"/>
    <subtitle>Hikari's Notebook Blog</subtitle>
    <icon>https://www.hikari-dev.com/en/img/favicon.ico</icon>
    <entry>
        <title type="html"><![CDATA[Migrated from AWS S3 to Cloudflare Pages]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/04/19/migrate-to-cloudflare-pages</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/04/19/migrate-to-cloudflare-pages"/>
        <updated>2026-04-19T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[I migrated this blog from AWS S3 to Cloudflare Pages. Until now, I had been hosting statically on S3 and delivering through CloudFront, but I decided to adopt Cloudflare Pages to simplify management and improve performance.]]></summary>
        <content type="html"><![CDATA[<p>I migrated this blog from AWS S3 to Cloudflare Pages. Until now, I had been hosting statically on S3 and delivering through CloudFront, but I decided to adopt Cloudflare Pages to simplify management and improve performance.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="why-cloudflare-pages">Why Cloudflare Pages<a href="https://www.hikari-dev.com/en/blog/2026/04/19/migrate-to-cloudflare-pages#why-cloudflare-pages" class="hash-link" aria-label="Direct link to Why Cloudflare Pages" title="Direct link to Why Cloudflare Pages" translate="no">​</a></h2>
<p>I had been operating with the standard AWS setup of S3 + CloudFront + Route53, but I decided to switch to Cloudflare Pages for the following reasons:</p>
<ol>
<li class=""><strong>Low management cost</strong>: Automatic SSL certificate renewal and global edge deployments are built-in by default.</li>
<li class=""><strong>Generous free tier</strong>: For traffic levels typical of a personal blog, almost all features can be used within the free tier.</li>
<li class=""><strong>Flexible deployment</strong>: Supports not only GitHub integration but also direct upload from GitHub Actions, maintaining complex build workflows.</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="migration-steps">Migration Steps<a href="https://www.hikari-dev.com/en/blog/2026/04/19/migrate-to-cloudflare-pages#migration-steps" class="hash-link" aria-label="Direct link to Migration Steps" title="Direct link to Migration Steps" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="1-create-github-actions-workflow">1. Create GitHub Actions Workflow<a href="https://www.hikari-dev.com/en/blog/2026/04/19/migrate-to-cloudflare-pages#1-create-github-actions-workflow" class="hash-link" aria-label="Direct link to 1. Create GitHub Actions Workflow" title="Direct link to 1. Create GitHub Actions Workflow" translate="no">​</a></h3>
<p>I rewrote the existing workflow for S3 deployment to work with Cloudflare Pages. This time, I used <code>cloudflare/pages-action</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="2-create-cloudflare-pages-project">2. Create Cloudflare Pages Project<a href="https://www.hikari-dev.com/en/blog/2026/04/19/migrate-to-cloudflare-pages#2-create-cloudflare-pages-project" class="hash-link" aria-label="Direct link to 2. Create Cloudflare Pages Project" title="Direct link to 2. Create Cloudflare Pages Project" translate="no">​</a></h3>
<p>Create a project from the Cloudflare dashboard or CLI (Wrangler). This time, to ensure specifying the branch correctly, I used Wrangler.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="3-switch-dns">3. Switch DNS<a href="https://www.hikari-dev.com/en/blog/2026/04/19/migrate-to-cloudflare-pages#3-switch-dns" class="hash-link" aria-label="Direct link to 3. Switch DNS" title="Direct link to 3. Switch DNS" translate="no">​</a></h3>
<p>Updated the DNS record for <code>www.hikari-dev.com</code>, which was pointing to S3, to point to the Cloudflare Pages endpoint (<code>xxx.pages.dev</code>).</p>
<p>When adding a custom domain on the Cloudflare Pages side, automatic verification runs and an SSL certificate is issued. If old records remain, verification can fail, so deleting the domain settings once and re-registering helped the changes reflect smoothly.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="post-migration-impressions">Post-Migration Impressions<a href="https://www.hikari-dev.com/en/blog/2026/04/19/migrate-to-cloudflare-pages#post-migration-impressions" class="hash-link" aria-label="Direct link to Post-Migration Impressions" title="Direct link to Post-Migration Impressions" translate="no">​</a></h2>
<p>The migration itself was very smooth, and the deployment speed is comparable to uploading to S3. Above all, I feel the biggest benefit is that multiple AWS-managed resources (S3 buckets, CloudFront distributions, ACM certificates) could be consolidated into a single Cloudflare Pages project.</p>
<p>Going forward, I also want to consider adding dynamic features using Cloudflare Workers and the like.</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="Cloudflare" term="Cloudflare"/>
        <category label="Docusaurus" term="Docusaurus"/>
        <category label="CI/CD" term="CI/CD"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[GPT-5.4 / GPT-5.4 mini / GPT-5.4 nano / GPT-4o / GPT-4o mini: Pricing and Performance Comparison]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison"/>
        <updated>2026-04-18T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[This article compares the pricing, specs, and performance of OpenAI's current API models: GPT-5.4, GPT-5.4 nano, GPT-5.4 mini, GPT-4o, and GPT-4o mini, along with guidance on which model to choose for different use cases.]]></summary>
        <content type="html"><![CDATA[<p>This article compares the pricing, specs, and performance of OpenAI's current API models: GPT-5.4, GPT-5.4 nano, GPT-5.4 mini, GPT-4o, and GPT-4o mini, along with guidance on which model to choose for different use cases.</p>
<!-- -->
<blockquote>
<p>Unit: USD / 1M tokens (MTok). Information as of April 2026.</p>
</blockquote>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="pricing-comparison">Pricing Comparison<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#pricing-comparison" class="hash-link" aria-label="Direct link to Pricing Comparison" title="Direct link to Pricing Comparison" translate="no">​</a></h2>
<table><thead><tr><th>Model</th><th style="text-align:right">Input</th><th style="text-align:right">Cached Input</th><th style="text-align:right">Output</th></tr></thead><tbody><tr><td><strong>GPT-5.4</strong></td><td style="text-align:right">$2.50</td><td style="text-align:right">$1.25</td><td style="text-align:right">$15.00</td></tr><tr><td><strong>GPT-5.4 mini</strong></td><td style="text-align:right">$0.75</td><td style="text-align:right">$0.075</td><td style="text-align:right">$4.50</td></tr><tr><td><strong>GPT-5.4 nano</strong></td><td style="text-align:right">$0.20</td><td style="text-align:right">$0.02</td><td style="text-align:right">$1.25</td></tr><tr><td><strong>GPT-4o</strong></td><td style="text-align:right">$2.50</td><td style="text-align:right">$1.25</td><td style="text-align:right">$10.00</td></tr><tr><td><strong>GPT-4o mini</strong></td><td style="text-align:right">$0.15</td><td style="text-align:right">$0.075</td><td style="text-align:right">$0.60</td></tr></tbody></table>
<p>GPT-4o mini is the cheapest on both input and output, but its knowledge cutoff is October 2023, making it unsuitable for tasks requiring up-to-date information. GPT-5.4 nano has nearly the same input cost as GPT-4o mini, while offering GPT-5.4 family quality and knowledge up to August 2025. GPT-5.4 (flagship) matches GPT-4o on input cost but has a high output cost of $15.00/MTok, making it best suited for tasks that demand top-quality reasoning.</p>
<p>When using regional processing endpoints, a <strong>10% surcharge</strong> applies to the GPT-5.4 series.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="specs-comparison">Specs Comparison<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#specs-comparison" class="hash-link" aria-label="Direct link to Specs Comparison" title="Direct link to Specs Comparison" translate="no">​</a></h2>
<table><thead><tr><th>Model</th><th style="text-align:center">Context</th><th style="text-align:center">Max Output</th><th style="text-align:center">Image Input</th><th style="text-align:center">Knowledge Cutoff</th></tr></thead><tbody><tr><td><strong>GPT-5.4</strong></td><td style="text-align:center">400K</td><td style="text-align:center">128K</td><td style="text-align:center">✓</td><td style="text-align:center">August 2025</td></tr><tr><td><strong>GPT-5.4 mini</strong></td><td style="text-align:center">400K</td><td style="text-align:center">128K</td><td style="text-align:center">✓</td><td style="text-align:center">August 2025</td></tr><tr><td><strong>GPT-5.4 nano</strong></td><td style="text-align:center">400K</td><td style="text-align:center">128K</td><td style="text-align:center">✓</td><td style="text-align:center">August 2025</td></tr><tr><td><strong>GPT-4o</strong></td><td style="text-align:center">128K</td><td style="text-align:center">16,384</td><td style="text-align:center">✓</td><td style="text-align:center">October 2023</td></tr><tr><td><strong>GPT-4o mini</strong></td><td style="text-align:center">128K</td><td style="text-align:center">16,384</td><td style="text-align:center">✓</td><td style="text-align:center">October 2023</td></tr></tbody></table>
<p>The GPT-5.4 series dramatically expands the context window to <strong>400K tokens</strong> and supports up to 128K tokens of output. GPT-4o and GPT-4o mini are capped at 128K context and 16K output.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="performance-comparison">Performance Comparison<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#performance-comparison" class="hash-link" aria-label="Direct link to Performance Comparison" title="Direct link to Performance Comparison" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-54">GPT-5.4<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#gpt-54" class="hash-link" aria-label="Direct link to GPT-5.4" title="Direct link to GPT-5.4" translate="no">​</a></h3>
<p>The flagship model of the GPT-5.4 family. It represents the highest intelligence available from OpenAI in the current generation, significantly outperforming GPT-5.4 mini in complex reasoning, long-form generation, and advanced coding. It supports all native tools including computer use, MCP, and web search, with full multimodal input/output support. Given the high output cost of $15.00/MTok, it is most effective when reserved for tasks where top-quality output is essential.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-54-mini">GPT-5.4 mini<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#gpt-54-mini" class="hash-link" aria-label="Direct link to GPT-5.4 mini" title="Direct link to GPT-5.4 mini" translate="no">​</a></h3>
<p>The mid-tier model of the GPT-5.4 family, optimized for coding, computer use, and sub-agent tasks. It consistently outperforms GPT-5 mini and achieves pass rates close to the flagship GPT-5.4 with faster processing. Benchmarks show a <strong>2× or greater speed improvement</strong> over GPT-5 mini, offering the best performance/latency trade-off for coding workflows.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-54-nano">GPT-5.4 nano<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#gpt-54-nano" class="hash-link" aria-label="Direct link to GPT-5.4 nano" title="Direct link to GPT-5.4 nano" translate="no">​</a></h3>
<p>The smallest and most affordable model in the GPT-5.4 family. Optimized for high-volume use cases where speed and cost are the top priorities — such as classification, data extraction, ranking, and coding sub-agents. Not suited for complex tasks requiring deep reasoning.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-4o">GPT-4o<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#gpt-4o" class="hash-link" aria-label="Direct link to GPT-4o" title="Direct link to GPT-4o" translate="no">​</a></h3>
<p>The general-purpose flagship model with high intelligence for both text and image tasks. It is now a legacy model, superseded by the GPT-5.4 series. GPT-4o was retired from ChatGPT in February 2026, but API access remains available.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gpt-4o-mini">GPT-4o mini<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#gpt-4o-mini" class="hash-link" aria-label="Direct link to GPT-4o mini" title="Direct link to GPT-4o mini" translate="no">​</a></h3>
<p>Designed as a compact model ideal for fine-tuning. Achieves results comparable to larger models (GPT-4o) at lower cost and latency through distillation. MMLU score: <strong>82.0%</strong>. Best suited for minimizing inference costs on simple tasks.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="which-model-to-choose">Which Model to Choose<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#which-model-to-choose" class="hash-link" aria-label="Direct link to Which Model to Choose" title="Direct link to Which Model to Choose" translate="no">​</a></h2>
<ul>
<li class=""><strong>High-volume / cost-first</strong>: GPT-5.4 nano or GPT-4o mini. Choose GPT-5.4 nano if up-to-date knowledge is required; GPT-4o mini if fine-tuning is needed.</li>
<li class=""><strong>Coding and agents</strong>: GPT-5.4 mini. The best balance of speed and accuracy.</li>
<li class=""><strong>Complex reasoning / high-quality output</strong>: GPT-5.4. High cost at $2.50 input / $15.00 output per MTok, but delivers the best output quality of the current generation.</li>
<li class=""><strong>Legacy system compatibility</strong>: GPT-4o. API access remains available, allowing existing integrations to continue.</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="best-value-options">Best Value Options<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#best-value-options" class="hash-link" aria-label="Direct link to Best Value Options" title="Direct link to Best Value Options" translate="no">​</a></h2>
<p>For cost-effectiveness, the two standout models are <strong>GPT-5.4 nano</strong> and <strong>GPT-5.4 mini</strong>.</p>
<p><strong>GPT-5.4 nano</strong> has nearly the same input cost as GPT-4o mini ($0.20 vs $0.15), yet offers a 400K context window, knowledge up to August 2025, and full access to native tools such as web search, file search, and MCP. It surpasses GPT-4o mini in almost every dimension except knowledge cutoff, so switching to GPT-5.4 nano makes sense for any use case that doesn't require fine-tuning.</p>
<p><strong>GPT-5.4 mini</strong> is cheaper on input ($0.75) than GPT-4o ($2.50/MTok) while outperforming GPT-4o in coding and agentic workflows. If you regularly use GPT-4o, switching to GPT-5.4 mini is likely to reduce costs while improving performance simultaneously.</p>
<p>On the other hand, <strong>GPT-4o</strong> now feels overpriced. Its input cost matches GPT-5.4 ($2.50/MTok), yet it falls behind in context size, knowledge recency, and tool support. Unless you specifically need fine-tuning or compatibility with existing systems, there is little reason to actively choose GPT-4o.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="references">References<a href="https://www.hikari-dev.com/en/blog/2026/04/18/gpt-54-pricing-comparison#references" class="hash-link" aria-label="Direct link to References" title="Direct link to References" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://developers.openai.com/api/docs/pricing" target="_blank" rel="noopener noreferrer" class="">OpenAI API Pricing</a></li>
<li class=""><a href="https://developers.openai.com/api/docs/models/gpt-5.4-mini" target="_blank" rel="noopener noreferrer" class="">GPT-5.4 mini Model Details</a></li>
<li class=""><a href="https://developers.openai.com/api/docs/models/gpt-5.4-nano" target="_blank" rel="noopener noreferrer" class="">GPT-5.4 nano Model Details</a></li>
<li class=""><a href="https://openai.com/index/introducing-gpt-5-4-mini-and-nano/" target="_blank" rel="noopener noreferrer" class="">Introducing GPT-5.4 mini and nano – OpenAI</a></li>
<li class=""><a href="https://developers.openai.com/api/docs/models/gpt-5.4" target="_blank" rel="noopener noreferrer" class="">GPT-5.4 Model Details</a></li>
<li class=""><a href="https://developers.openai.com/api/docs/models/gpt-4o-mini" target="_blank" rel="noopener noreferrer" class="">GPT-4o mini Model Details</a></li>
</ul>]]></content>
        <category label="AI" term="AI"/>
        <category label="OpenAI" term="OpenAI"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Why "Multiples of 8" Are the Standard for Spacing in CSS]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/04/12/8px-spacing-rule</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/04/12/8px-spacing-rule"/>
        <updated>2026-04-12T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[In modern UI design, the rule of setting "spacing in multiples of 8" is commonly used. This is not just a convention, but an empirical rule supported by the mathematical consistency of screen density, typography, and scale.]]></summary>
        <content type="html"><![CDATA[<p>In modern UI design, the rule of setting "spacing in multiples of 8" is commonly used. This is not just a convention, but an empirical rule supported by the <strong>mathematical consistency of screen density, typography, and scale</strong>.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="addressing-various-screen-densities">Addressing Various Screen Densities<a href="https://www.hikari-dev.com/en/blog/2026/04/12/8px-spacing-rule#addressing-various-screen-densities" class="hash-link" aria-label="Direct link to Addressing Various Screen Densities" title="Direct link to Addressing Various Screen Densities" translate="no">​</a></h2>
<p>Modern displays have pixel ratios such as <strong>1x, 1.5x, 2x, 3x, and 4x</strong>.</p>
<table><thead><tr><th>Value</th><th>1x</th><th>1.5x</th><th>2x</th><th>3x</th><th>4x</th></tr></thead><tbody><tr><td><strong>8 px</strong></td><td>8</td><td>12</td><td>16</td><td>24</td><td>32</td></tr><tr><td>5 px</td><td>5</td><td>7.5 ⚠️</td><td>10</td><td>15</td><td>20</td></tr></tbody></table>
<p>Since 8 is <strong>divisible into integers</strong> for many scales, it minimizes blurring caused by subpixel rendering. Using values like 5 px can generate fractions like 7.5 px in a 1.5x environment, leading to inaccurate rendering.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="compatibility-with-typography">Compatibility with Typography<a href="https://www.hikari-dev.com/en/blog/2026/04/12/8px-spacing-rule#compatibility-with-typography" class="hash-link" aria-label="Direct link to Compatibility with Typography" title="Direct link to Compatibility with Typography" translate="no">​</a></h2>
<p>The default font size in browsers is <strong>16 px (= 8 × 2)</strong>. Line height is typically 1.5 times that, which equals 24 px (= 8 × 3).</p>
<p>By setting spacing in multiples of 8, the rhythm of the text can visually align more easily. The height of headings and body text matches the spacing grid, creating a <strong>well-organized vertical rhythm</strong>.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="ease-of-creating-design-tokens">Ease of Creating Design Tokens<a href="https://www.hikari-dev.com/en/blog/2026/04/12/8px-spacing-rule#ease-of-creating-design-tokens" class="hash-link" aria-label="Direct link to Ease of Creating Design Tokens" title="Direct link to Ease of Creating Design Tokens" translate="no">​</a></h2>
<div class="language-css codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-css codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token variable" style="color:#36acaa">--space-1</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">8</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token variable" style="color:#36acaa">--space-2</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">16</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token variable" style="color:#36acaa">--space-3</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">24</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token variable" style="color:#36acaa">--space-4</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">32</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<p>The scale is simple, making it easy for designers and engineers to utilize as a <strong>common language</strong>. Material Design and Tailwind CSS also adopt this philosophy.</p>
<p>When a designer specifies "space-3," the engineer can confidently apply <code>24px</code>. A consistent naming convention reduces the communication cost during code reviews.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="the-option-of-a-4-px-base">The Option of a 4 px Base<a href="https://www.hikari-dev.com/en/blog/2026/04/12/8px-spacing-rule#the-option-of-a-4-px-base" class="hash-link" aria-label="Direct link to The Option of a 4 px Base" title="Direct link to The Option of a 4 px Base" translate="no">​</a></h2>
<p>For UIs that require finer adjustments, a <strong>4 px base</strong> (4, 8, 12, 16...) is also common. Tailwind CSS adopts a default 4 px base (<code>p-1 = 4px</code>).</p>
<p>The 4 px base is a subset of the 8 px base, so both can coexist without contradiction. It is effective to use 4 px units for small spacings within components, while using 8 px units for larger spacings between sections.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="conclusion">Conclusion<a href="https://www.hikari-dev.com/en/blog/2026/04/12/8px-spacing-rule#conclusion" class="hash-link" aria-label="Direct link to Conclusion" title="Direct link to Conclusion" translate="no">​</a></h2>
<p>The reasons for using multiples of 8 as the standard for spacing can be summarized in three points:</p>
<ol>
<li class=""><strong>Addressing Screen Density</strong>: It divides into integers across many pixel ratios, preventing subpixel blurriness.</li>
<li class=""><strong>Consistency with Typography</strong>: Aligns with the default font size (16 px) and line height (24 px), creating a vertical rhythm.</li>
<li class=""><strong>Consistency in Scale</strong>: A simple token system serves as a common language for designers and engineers.</li>
</ol>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="Design" term="Design"/>
        <category label="CSS" term="CSS"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[New Feature: Mount S3 Buckets to EC2 Using Amazon S3 Files]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/04/08/s3-files</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files"/>
        <updated>2026-04-08T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Amazon S3 Files is a service that allows you to directly mount S3 buckets as an NFS file system on compute resources such as EC2. Data remains stored in S3 while enabling typical file operations (ls, cp, cat, etc.) for reading and writing.]]></summary>
        <content type="html"><![CDATA[<p>Amazon S3 Files is a service that allows you to directly mount S3 buckets as an NFS file system on compute resources such as EC2. Data remains stored in S3 while enabling typical file operations (<code>ls</code>, <code>cp</code>, <code>cat</code>, etc.) for reading and writing.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="what-is-s3-files">What is S3 Files?<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#what-is-s3-files" class="hash-link" aria-label="Direct link to What is S3 Files?" title="Direct link to What is S3 Files?" translate="no">​</a></h2>
<p>S3 Files is a shared file system built on Amazon EFS, providing file system access to data stored in S3 buckets.</p>
<p>Key features include:</p>
<table><thead><tr><th>Item</th><th>Description</th></tr></thead><tbody><tr><td>Protocol</td><td>NFS 4.1 / 4.2</td></tr><tr><td>Supported Compute</td><td>EC2, Lambda, ECS, EKS</td></tr><tr><td>Concurrent Connections</td><td>Up to 25,000 compute resources</td></tr><tr><td>Read Throughput</td><td>Up to TB/second</td></tr><tr><td>IOPS</td><td>Over 10 million / bucket</td></tr><tr><td>Encryption</td><td>TLS (in transit) + AWS KMS (at rest)</td></tr><tr><td>File System Features</td><td>POSIX permissions, file locking, read-after-write consistency</td></tr></tbody></table>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="how-it-works">How It Works<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#how-it-works" class="hash-link" aria-label="Direct link to How It Works" title="Direct link to How It Works" translate="no">​</a></h3>
<p>S3 Files automatically loads accessed data to high-performance storage and provides it with low latency.</p>
<ul>
<li class=""><strong>Small Files</strong> (default less than 128 KB): Read directly from high-performance storage</li>
<li class=""><strong>Large Files</strong> (1 MB and above): Stream directly from S3</li>
<li class=""><strong>Writing</strong>: Write to high-performance storage and automatically sync to S3</li>
</ul>
<p>Data on high-performance storage is automatically deleted after a certain period of inactivity (default 30 days, configurable from 1 to 365 days).</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="prerequisites">Prerequisites<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites" translate="no">​</a></h2>
<ul>
<li class="">AWS Account</li>
<li class="">EC2 Instance (Linux)</li>
<li class="">S3 Bucket (in the same region as EC2)</li>
<li class="">Two IAM Roles<!-- -->
<ul>
<li class="">For creating the file system: Permissions to read/write to the S3 bucket</li>
<li class="">For the EC2 instance: Attach the <code>AmazonS3FilesClientFullAccess</code> managed policy</li>
</ul>
</li>
<li class="">Security Group: Allow communication on NFS port 2049</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="creating-iam-roles">Creating IAM Roles<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#creating-iam-roles" class="hash-link" aria-label="Direct link to Creating IAM Roles" title="Direct link to Creating IAM Roles" translate="no">​</a></h3>
<p>Two IAM roles are required for S3 Files.</p>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="1-role-for-creating-file-systems">1. Role for Creating File Systems<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#1-role-for-creating-file-systems" class="hash-link" aria-label="Direct link to 1. Role for Creating File Systems" title="Direct link to 1. Role for Creating File Systems" translate="no">​</a></h4>
<p><strong>Automatically created when using the management console, so this step is not necessary</strong></p>
<p>This is the role that allows S3 Files to access the bucket.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># Create role</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam create-role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name S3Files-FileSystem-Role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --assume-role-policy-document </span><span class="token string" style="color:#e3116c">'{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    "Version": "2012-10-17",</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    "Statement": [</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">      {</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Effect": "Allow",</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Principal": { "Service": "s3files.amazonaws.com" },</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Action": "sts:AssumeRole"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">      }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    ]</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">  }'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Attach S3 Files client policy</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam attach-role-policy </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name S3Files-FileSystem-Role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --policy-arn arn:aws:iam::aws:policy/AmazonS3FilesClientFullAccess</span></span><br></div></code></pre></div></div>
<p>Specify this role with <code>--role-arn</code> when creating the file system.</p>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="2-role-for-ec2-instance">2. Role for EC2 Instance<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#2-role-for-ec2-instance" class="hash-link" aria-label="Direct link to 2. Role for EC2 Instance" title="Direct link to 2. Role for EC2 Instance" translate="no">​</a></h4>
<p><strong>Failure to attach the IAM role will result in mount failure</strong></p>
<p>Create the following role in CloudShell.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># Create role</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam create-role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name EC2-S3Files-Role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --assume-role-policy-document </span><span class="token string" style="color:#e3116c">'{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    "Version": "2012-10-17",</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    "Statement": [</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">      {</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Effect": "Allow",</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Principal": { "Service": "ec2.amazonaws.com" },</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">        "Action": "sts:AssumeRole"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">      }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">    ]</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">  }'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Attach S3 Files client policy</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam attach-role-policy </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name EC2-S3Files-Role </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --policy-arn arn:aws:iam::aws:policy/AmazonS3FilesClientFullAccess</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Create and attach instance profile</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam create-instance-profile </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --instance-profile-name EC2-S3Files-Profile</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws iam add-role-to-instance-profile </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --instance-profile-name EC2-S3Files-Profile </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  --role-name EC2-S3Files-Role</span></span><br></div></code></pre></div></div>
<p>Attach this role to the instance.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="setup-steps">Setup Steps<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#setup-steps" class="hash-link" aria-label="Direct link to Setup Steps" title="Direct link to Setup Steps" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="1-prepare-the-s3-bucket">1. Prepare the S3 Bucket<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#1-prepare-the-s3-bucket" class="hash-link" aria-label="Direct link to 1. Prepare the S3 Bucket" title="Direct link to 1. Prepare the S3 Bucket" translate="no">​</a></h3>
<p>Create a general-purpose bucket in the S3 console. You can also use an existing bucket.</p>
<p>However, <strong>versioning must be enabled for the bucket</strong>.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="2-create-the-file-system">2. Create the File System<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#2-create-the-file-system" class="hash-link" aria-label="Direct link to 2. Create the File System" title="Direct link to 2. Create the File System" translate="no">​</a></h3>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="if-creating-from-the-console">If Creating from the Console<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#if-creating-from-the-console" class="hash-link" aria-label="Direct link to If Creating from the Console" title="Direct link to If Creating from the Console" translate="no">​</a></h4>
<p><img decoding="async" loading="lazy" alt="alt text" src="https://www.hikari-dev.com/en/assets/images/image-94187530abfe3f668203ae1aedd9bcb6.webp" width="1884" height="1434" class="img_y1Im"></p>
<ol>
<li class="">Select the bucket in the S3 console</li>
<li class="">Click on the "File Systems" tab → then click "Create File System"</li>
</ol>
<p>Creating from the console automatically creates mount targets and access points in all AZs.</p>
<p><img decoding="async" loading="lazy" alt="alt text" src="https://www.hikari-dev.com/en/assets/images/image-2-87b383a4e6c713f047b8b9576f6e79a1.webp" width="1876" height="1118" class="img_y1Im"></p>
<ol start="3">
<li class="">Specify the prefix and VPC, and click "Create File System."</li>
</ol>
<p>Record the output file system ID (e.g., fs-0123456789abcdef0).</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="3-mount-on-the-instance">3. Mount on the Instance<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#3-mount-on-the-instance" class="hash-link" aria-label="Direct link to 3. Mount on the Instance" title="Direct link to 3. Mount on the Instance" translate="no">​</a></h3>
<p>In the terminal, execute the following:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># Create mount point</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mkdir</span><span class="token plain"> /mnt/s3files</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Mount</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mount</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-t</span><span class="token plain"> s3files fs-0123456789abcdef0:/ /mnt/s3files</span></span><br></div></code></pre></div></div>
<div class="theme-admonition theme-admonition-note admonition_fOhH alert alert--secondary"><div class="admonitionHeading_XaF5"><span class="admonitionIcon_zgRW"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_KaOa"><p>If the mount fails, execute the following command and retry.</p><div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> dnf </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-y</span><span class="token plain"> amazon-efs-utils </span><span class="token comment" style="color:#999988;font-style:italic"># Amazon Linux, RHEL</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># sudo apt install -y amazon-efs-utils (Ubuntu, Debian)</span></span><br></div></code></pre></div></div></div></div>
<div class="theme-admonition theme-admonition-note admonition_fOhH alert alert--secondary"><div class="admonitionHeading_XaF5"><span class="admonitionIcon_zgRW"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_KaOa"><p>If there is connectivity issue when executing the dnf command, set up an S3 endpoint (gateway) and assign it to the same AZ as the instance.</p><p>Ensure that the route table for the S3 endpoint matches the subnet where the instance is located.</p></div></div>
<p>To verify the mount:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">df</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-h</span><span class="token plain"> /mnt/s3files</span></span><br></div></code></pre></div></div>
<p>You should see output similar to the following:</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Filesystem      Size  Used Avail Use% Mounted on</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">&lt;s3files-dns&gt;   8.0E  129M  8.0E   1% /mnt/s3files</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="4-perform-functionality-checks">4. Perform Functionality Checks<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#4-perform-functionality-checks" class="hash-link" aria-label="Direct link to 4. Perform Functionality Checks" title="Direct link to 4. Perform Functionality Checks" translate="no">​</a></h3>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">cd</span><span class="token plain"> /mnt/s3files</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Create a file</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'echo "Hello, s3 Files!" &gt; test.txt'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Read the file</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">cat</span><span class="token plain"> test.txt</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Create a directory</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mkdir</span><span class="token plain"> test-directory</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-la</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Copy the file</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">cp</span><span class="token plain"> test.txt test-directory/</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> test-directory/</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Check the file list</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-la</span></span><br></div></code></pre></div></div>
<p>The file you wrote will sync to the S3 bucket in about one minute. You can verify that the object has been created in the S3 console.</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">aws s3 </span><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> s3://</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">bucket-name</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain">/</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="setting-up-auto-mount">Setting Up Auto-Mount<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#setting-up-auto-mount" class="hash-link" aria-label="Direct link to Setting Up Auto-Mount" title="Direct link to Setting Up Auto-Mount" translate="no">​</a></h2>
<p>To maintain the mount after a reboot, add the following line to <code>/etc/fstab</code>.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># Add to /etc/fstab</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">fs-0123456789abcdef0:/ /mnt/s3files s3files _netdev,nofail </span><span class="token number" style="color:#36acaa">0</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span></span><br></div></code></pre></div></div>
<p><code>_netdev</code> is an option that ensures the mount occurs after the network connection is established and is required. Adding <code>nofail</code> prevents the instance from becoming unbootable in the event of mount failure.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="pricing">Pricing<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#pricing" class="hash-link" aria-label="Direct link to Pricing" title="Direct link to Pricing" translate="no">​</a></h2>
<p>The pricing for S3 Files is composed of the following components:</p>
<ul>
<li class=""><strong>High-Performance Storage Usage</strong>: The storage fees for data on the file system</li>
<li class=""><strong>File System Access Fees</strong>: Read and write operations to high-performance storage</li>
<li class=""><strong>S3 Request Fees</strong>: Only the S3 GET charges apply when reading files over 1 MB directly from S3</li>
</ul>
<p>It operates on a usage-based pricing model with no provisioning required, and according to AWS, it can achieve cost savings of up to 90% compared to traditional data copying between S3 and file systems.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="summary">Summary<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#summary" class="hash-link" aria-label="Direct link to Summary" title="Direct link to Summary" translate="no">​</a></h2>
<ul>
<li class="">S3 Files allows you to mount S3 buckets as an NFS file system on EC2</li>
<li class="">Data remains stored in S3 while enabling typical file operations like <code>ls</code>, <code>cat</code>, and <code>cp</code></li>
<li class="">Low latency is achieved through caching on high-performance storage, and data that goes unused is automatically evicted</li>
<li class="">Configuring auto-mount using <code>/etc/fstab</code> ensures persistence after a reboot</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="references">References<a href="https://www.hikari-dev.com/en/blog/2026/04/08/s3-files#references" class="hash-link" aria-label="Direct link to References" title="Direct link to References" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://aws.amazon.com/jp/s3/features/files/" target="_blank" rel="noopener noreferrer" class="">Amazon S3 Files - Amazon Web Services</a></li>
<li class=""><a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/s3-files.html" target="_blank" rel="noopener noreferrer" class="">S3 Files User Guide - AWS Documentation</a></li>
<li class=""><a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/s3-files-getting-started.html" target="_blank" rel="noopener noreferrer" class="">Tutorial: Getting started with S3 Files - AWS Documentation</a></li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="Linux" term="Linux"/>
        <category label="S3" term="S3"/>
        <category label="S3 Files" term="S3 Files"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Inspecting AI Coding Tool Traffic with mitmproxy]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy"/>
        <updated>2026-04-05T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[By setting up mitmproxy as a man-in-the-middle proxy, you can monitor the API traffic that AI coding tools make in real time.]]></summary>
        <content type="html"><![CDATA[<p>By setting up mitmproxy as a man-in-the-middle proxy, you can monitor the API traffic that AI coding tools make in real time.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="how-it-works">How It Works<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#how-it-works" class="hash-link" aria-label="Direct link to How It Works" title="Direct link to How It Works" translate="no">​</a></h2>
<p>Many AI coding tools are Node.js applications that communicate with external APIs over HTTPS. By inserting mitmproxy as a man-in-the-middle proxy and configuring Node.js to trust the mitmproxy CA certificate, you can decrypt the encrypted traffic and inspect it in real time.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="installation">Installation<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#installation" class="hash-link" aria-label="Direct link to Installation" title="Direct link to Installation" translate="no">​</a></h2>
<p>The easiest way to install mitmproxy is via <code>uv</code>.</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">uv tool install mitmproxy</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="proxy-configuration">Proxy Configuration<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#proxy-configuration" class="hash-link" aria-label="Direct link to Proxy Configuration" title="Direct link to Proxy Configuration" translate="no">​</a></h2>
<p>Set the following environment variables before launching the tool.</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$env:HTTPS_PROXY = "http://127.0.0.1:8080"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$env:HTTP_PROXY  = "http://127.0.0.1:8080"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$env:NODE_EXTRA_CA_CERTS = "$env:USERPROFILE\.mitmproxy\mitmproxy-ca-cert.pem"</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="about-node_extra_ca_certs">About NODE_EXTRA_CA_CERTS<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#about-node_extra_ca_certs" class="hash-link" aria-label="Direct link to About NODE_EXTRA_CA_CERTS" title="Direct link to About NODE_EXTRA_CA_CERTS" translate="no">​</a></h3>
<p>Setting only <code>HTTPS_PROXY</code> and <code>HTTP_PROXY</code> will cause Node.js TLS verification to fail. mitmproxy uses a self-signed certificate when relaying HTTPS traffic, which Node.js rejects by default.</p>
<p>By specifying the path to the mitmproxy CA certificate in <code>NODE_EXTRA_CA_CERTS</code>, Node.js will trust it and the connection will succeed.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="generating-the-ca-certificate">Generating the CA Certificate<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#generating-the-ca-certificate" class="hash-link" aria-label="Direct link to Generating the CA Certificate" title="Direct link to Generating the CA Certificate" translate="no">​</a></h3>
<p>mitmproxy automatically generates a CA certificate on first launch and saves it to <code>~\.mitmproxy\</code>. If you haven't generated it yet, simply start mitmproxy once.</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">mitmweb</span></span><br></div></code></pre></div></div>
<p>A browser window opens automatically, showing the proxy management UI at <code>http://127.0.0.1:8081</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="launching-the-tool">Launching the Tool<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#launching-the-tool" class="hash-link" aria-label="Direct link to Launching the Tool" title="Direct link to Launching the Tool" translate="no">​</a></h2>
<p>Launch the tool in a separate terminal with the environment variables set.</p>
<p>Once you start using the tool, requests will appear in the mitmweb UI.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="captured-traffic">Captured Traffic<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#captured-traffic" class="hash-link" aria-label="Direct link to Captured Traffic" title="Direct link to Captured Traffic" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="endpoint">Endpoint<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#endpoint" class="hash-link" aria-label="Direct link to Endpoint" title="Direct link to Endpoint" translate="no">​</a></h3>
<p>The tool sends requests to the following endpoint.</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">POST https://api.example.com/v1/messages</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="request-headers">Request Headers<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#request-headers" class="hash-link" aria-label="Direct link to Request Headers" title="Direct link to Request Headers" translate="no">​</a></h3>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">x-service-version: ...</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">content-type: application/json</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">x-api-key: sk-...</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="request-body">Request Body<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#request-body" class="hash-link" aria-label="Direct link to Request Body" title="Direct link to Request Body" translate="no">​</a></h3>
<div class="language-json codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-json codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"model"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"model-name"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"max_tokens"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">16000</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"stream"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"system"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"type"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"text"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"text"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"..."</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"messages"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"role"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"user"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"content"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"..."</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"tools"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"name"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Read"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"description"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"..."</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"input_schema"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<p>Streaming responses are received in Server-Sent Events (SSE) format with <code>stream: true</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="response">Response<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#response" class="hash-link" aria-label="Direct link to Response" title="Direct link to Response" translate="no">​</a></h3>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">data: {"type":"content_block_start","index":0,"content_block":{"type":"text","text":""}}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">data: {"type":"content_block_delta","index":0,"delta":{"type":"text_delta","text":"Hello"}}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">...</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">data: {"type":"message_stop"}</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="what-you-can-learn">What You Can Learn<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#what-you-can-learn" class="hash-link" aria-label="Direct link to What You Can Learn" title="Direct link to What You Can Learn" translate="no">​</a></h2>
<table><thead><tr><th>Item</th><th>Details</th></tr></thead><tbody><tr><td>API endpoint</td><td><code>api.example.com/v1/messages</code></td></tr><tr><td>Authentication</td><td>API key (<code>x-api-key</code> header)</td></tr><tr><td>Streaming</td><td>SSE format</td></tr><tr><td>Tool definitions</td><td>Included in every request</td></tr><tr><td>System prompt</td><td>Thousands to tens of thousands of tokens</td></tr></tbody></table>
<p>The system prompt contains the AI coding tool's operating principles, descriptions of available tools, and usage guidelines.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="summary">Summary<a href="https://www.hikari-dev.com/en/blog/2026/04/05/ai-agent-mitmproxy#summary" class="hash-link" aria-label="Direct link to Summary" title="Direct link to Summary" translate="no">​</a></h2>
<ul>
<li class="">The key is trusting the mitmproxy CA certificate in Node.js via <code>NODE_EXTRA_CA_CERTS</code></li>
<li class="">API communication uses SSE streaming</li>
<li class="">You can inspect the internal structure of AI coding tools, including tool definitions and the system prompt</li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AI" term="AI"/>
        <category label="API" term="API"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Configuration of Passkeys (WebAuthn) using Amazon Cognito]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey"/>
        <updated>2026-04-05T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[I am using Amazon Cognito for user authentication in a file storage API built with AWS SAM. Recently, I added login via passkeys (WebAuthn), so I will summarize the configuration details.]]></summary>
        <content type="html"><![CDATA[<p>I am using Amazon Cognito for user authentication in a file storage API built with AWS SAM. Recently, I added login via passkeys (WebAuthn), so I will summarize the configuration details.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="prerequisites-required-cognito-settings-for-passkeys">Prerequisites: Required Cognito Settings for Passkeys<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#prerequisites-required-cognito-settings-for-passkeys" class="hash-link" aria-label="Direct link to Prerequisites: Required Cognito Settings for Passkeys" title="Direct link to Prerequisites: Required Cognito Settings for Passkeys" translate="no">​</a></h2>
<p>To use passkeys with Cognito, the following must all be in place:</p>
<table><thead><tr><th>Requirement</th><th>Current Configuration</th></tr></thead><tbody><tr><td>UserPool Tier</td><td><strong>ESSENTIALS</strong> or higher</td></tr><tr><td>Managed Login</td><td><strong>v2</strong> (New login UI)</td></tr><tr><td>Custom Domain</td><td><code>login.example.com</code> (Used as Relying Party ID)</td></tr></tbody></table>
<p>Cognito's passkeys will be registered and used through the Managed Login v2 UI. WebAuthn cannot be used with the LITE tier (free), so the ESSENTIALS tier is necessary.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="authentication-flow">Authentication Flow<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#authentication-flow" class="hash-link" aria-label="Direct link to Authentication Flow" title="Direct link to Authentication Flow" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="passkey-registration-flow">Passkey Registration Flow<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#passkey-registration-flow" class="hash-link" aria-label="Direct link to Passkey Registration Flow" title="Direct link to Passkey Registration Flow" translate="no">​</a></h3>
<p>For the first time, log in with a password and register the passkey from the account settings.</p>
<!-- -->
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="passkey-login-flow">Passkey Login Flow<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#passkey-login-flow" class="hash-link" aria-label="Direct link to Passkey Login Flow" title="Direct link to Passkey Login Flow" translate="no">​</a></h3>
<p>After registration, authentication can be done directly via the "Sign in with passkey" button.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="configuration-details">Configuration Details<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#configuration-details" class="hash-link" aria-label="Direct link to Configuration Details" title="Direct link to Configuration Details" translate="no">​</a></h2>
<p>The changes made to the <code>template.yaml</code> (SAM template) for adding the passkey amount to just 6 lines.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="before-changes">Before Changes<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#before-changes" class="hash-link" aria-label="Direct link to Before Changes" title="Direct link to Before Changes" translate="no">​</a></h3>
<div class="language-yaml codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-yaml codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token key atrule" style="color:#00a4db">UserPool</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">Type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> AWS</span><span class="token punctuation" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">Cognito</span><span class="token punctuation" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">UserPool</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">Properties</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic"># ...</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">Policies</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token key atrule" style="color:#00a4db">PasswordPolicy</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token key atrule" style="color:#00a4db">MinimumLength</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">8</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic"># ...</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">MfaConfiguration</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"OFF"</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="after-changes">After Changes<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#after-changes" class="hash-link" aria-label="Direct link to After Changes" title="Direct link to After Changes" translate="no">​</a></h3>
<div class="language-yaml codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-yaml codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token key atrule" style="color:#00a4db">UserPool</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">Type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> AWS</span><span class="token punctuation" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">Cognito</span><span class="token punctuation" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">UserPool</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token key atrule" style="color:#00a4db">Properties</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic"># ...</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">Policies</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token key atrule" style="color:#00a4db">PasswordPolicy</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token key atrule" style="color:#00a4db">MinimumLength</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">8</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic"># ...</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token key atrule" style="color:#00a4db">SignInPolicy</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token key atrule" style="color:#00a4db">AllowedFirstAuthFactors</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> PASSWORD</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> WEB_AUTHN       </span><span class="token comment" style="color:#999988;font-style:italic"># ← Added passkey</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">MfaConfiguration</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"OFF"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">WebAuthnRelyingPartyID</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> login.example.com   </span><span class="token comment" style="color:#999988;font-style:italic"># ← Specify RP ID</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">WebAuthnUserVerification</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> required              </span><span class="token comment" style="color:#999988;font-style:italic"># ← Require biometric verification</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="explanation-of-each-parameter">Explanation of Each Parameter<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#explanation-of-each-parameter" class="hash-link" aria-label="Direct link to Explanation of Each Parameter" title="Direct link to Explanation of Each Parameter" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="signinpolicyallowedfirstauthfactors"><code>SignInPolicy.AllowedFirstAuthFactors</code><a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#signinpolicyallowedfirstauthfactors" class="hash-link" aria-label="Direct link to signinpolicyallowedfirstauthfactors" title="Direct link to signinpolicyallowedfirstauthfactors" translate="no">​</a></h3>
<p>This is the list of authentication methods that can be used during the first authentication step. With only <code>PASSWORD</code>, it allows password-only authentication; adding <code>WEB_AUTHN</code> allows passkeys as an option.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="webauthnrelyingpartyid"><code>WebAuthnRelyingPartyID</code><a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#webauthnrelyingpartyid" class="hash-link" aria-label="Direct link to webauthnrelyingpartyid" title="Direct link to webauthnrelyingpartyid" translate="no">​</a></h3>
<p>This is the <strong>Relying Party ID (RP ID)</strong> for WebAuthn. Passkeys are generated and stored associated with this domain, so it <strong>must match the domain serving the actual login page</strong>.</p>
<p>In this case, I have directly specified the custom domain <code>login.example.com</code>. If you are using the Cognito default domain (<code>xxx.auth.ap-northeast-1.amazoncognito.com</code>), specify that one.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="webauthnuserverification"><code>WebAuthnUserVerification</code><a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#webauthnuserverification" class="hash-link" aria-label="Direct link to webauthnuserverification" title="Direct link to webauthnuserverification" translate="no">​</a></h3>
<p>This defines the required level of user verification when using passkeys.</p>
<table><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td><code>required</code></td><td>Requires biometric authentication or PIN</td></tr><tr><td><code>preferred</code></td><td>Prefer user verification but allow even without it</td></tr><tr><td><code>discouraged</code></td><td>Skip user verification (no biometric, etc.)</td></tr></tbody></table>
<p>To enhance security, I chose <code>required</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="managed-login-ui">Managed Login UI<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#managed-login-ui" class="hash-link" aria-label="Direct link to Managed Login UI" title="Direct link to Managed Login UI" translate="no">​</a></h2>
<p>In the Managed Login v2 interface, after configuring the passkey, the "Sign in with passkey" button will be automatically added to the login screen. For initial registration, you can add a passkey from the account settings after logging in with a password.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="deployment">Deployment<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#deployment" class="hash-link" aria-label="Direct link to Deployment" title="Direct link to Deployment" translate="no">​</a></h2>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sam build</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sam deploy --no-confirm-changeset</span></span><br></div></code></pre></div></div>
<p>Since the stack name, region, and parameters are defined in <code>samconfig.toml</code>, there is no need to specify options each time.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="conclusion">Conclusion<a href="https://www.hikari-dev.com/en/blog/2026/04/05/cognito-passkey#conclusion" class="hash-link" aria-label="Direct link to Conclusion" title="Direct link to Conclusion" translate="no">​</a></h2>
<p>The key points for enabling passkeys in Cognito are:</p>
<ol>
<li class="">Set to <strong>ESSENTIALS tier</strong> (LITE does not support WebAuthn)</li>
<li class="">Use <strong>Managed Login v2</strong></li>
<li class="">Specify a <strong>custom domain</strong> (or the Cognito default domain) as the RP ID</li>
<li class="">Add <code>WEB_AUTHN</code> to <code>SignInPolicy.AllowedFirstAuthFactors</code></li>
<li class="">Set <code>WebAuthnUserVerification: required</code> to make biometric verification mandatory</li>
</ol>
<p>With just 6 lines of changes, passkey login has become available. The convenience of Cognito lies in the ability to gradually transition to passkeys while still retaining passwords.</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="Cognito" term="Cognito"/>
        <category label="WebAuthn" term="WebAuthn"/>
        <category label="Security" term="Security"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Calling the Vertex AI Gemini API from PowerShell]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell"/>
        <updated>2026-04-03T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[This covers how to call Gemini models via Google Cloud's Vertex AI from PowerShell. Both the OpenAI-compatible endpoint and the native Gemini endpoint are explained.]]></summary>
        <content type="html"><![CDATA[<p>This covers how to call Gemini models via Google Cloud's Vertex AI from PowerShell. Both the OpenAI-compatible endpoint and the native Gemini endpoint are explained.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="authentication">Authentication<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#authentication" class="hash-link" aria-label="Direct link to Authentication" title="Direct link to Authentication" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="gcloud-auth-recommended">gcloud auth (Recommended)<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#gcloud-auth-recommended" class="hash-link" aria-label="Direct link to gcloud auth (Recommended)" title="Direct link to gcloud auth (Recommended)" translate="no">​</a></h3>
<p>No API key required. Uses your existing Google Cloud credentials.</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$accessToken = (gcloud auth print-access-token)</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="api-key">API key<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#api-key" class="hash-link" aria-label="Direct link to API key" title="Direct link to API key" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$apiKey = $env:VERTEX_API_KEY</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="endpoints">Endpoints<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#endpoints" class="hash-link" aria-label="Direct link to Endpoints" title="Direct link to Endpoints" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-compatible-endpoint-gcloud-auth">OpenAI-compatible endpoint (gcloud auth)<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#openai-compatible-endpoint-gcloud-auth" class="hash-link" aria-label="Direct link to OpenAI-compatible endpoint (gcloud auth)" title="Direct link to OpenAI-compatible endpoint (gcloud auth)" translate="no">​</a></h3>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">https://{region}-aiplatform.googleapis.com/v1beta1/projects/{projectId}/locations/{region}/endpoints/openapi/chat/completions</span></span><br></div></code></pre></div></div>
<p>The request and response format is identical to the OpenAI API. The model name requires a <code>google/</code> prefix (e.g., <code>google/gemini-2.5-flash-lite</code>).</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="native-gemini-endpoint-api-key">Native Gemini endpoint (API key)<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#native-gemini-endpoint-api-key" class="hash-link" aria-label="Direct link to Native Gemini endpoint (API key)" title="Direct link to Native Gemini endpoint (API key)" translate="no">​</a></h3>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">https://{region}-aiplatform.googleapis.com/v1/projects/{projectId}/locations/{region}/publishers/google/models/{model}:generateContent</span></span><br></div></code></pre></div></div>
<p>For streaming, use <code>:streamGenerateContent</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="basic-calls">Basic calls<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#basic-calls" class="hash-link" aria-label="Direct link to Basic calls" title="Direct link to Basic calls" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-compatible-gcloud-auth">OpenAI-compatible (gcloud auth)<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#openai-compatible-gcloud-auth" class="hash-link" aria-label="Direct link to OpenAI-compatible (gcloud auth)" title="Direct link to OpenAI-compatible (gcloud auth)" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$projectId   = "your-project-id"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$region      = "us-central1"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$model       = "google/gemini-2.5-flash-lite"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$accessToken = (gcloud auth print-access-token)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    model    = $model</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    messages = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role    = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            content = "What is the population of Tokyo?"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$uri = "https://$region-aiplatform.googleapis.com/v1beta1/projects/$projectId/locations/$region/endpoints/openapi/chat/completions"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response = Invoke-RestMethod `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Uri         $uri `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Method      Post `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -ContentType "application/json" `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Headers     @{ Authorization = "Bearer $accessToken" } `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Body        $body</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.choices[0].message.content</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="native-gemini-api-key">Native Gemini (API key)<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#native-gemini-api-key" class="hash-link" aria-label="Direct link to Native Gemini (API key)" title="Direct link to Native Gemini (API key)" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$projectId = "your-project-id"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$region    = "us-central1"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$model     = "gemini-2.5-flash-lite"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$apiKey    = $env:VERTEX_API_KEY</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    contents = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">                @{ text = "What is the population of Tokyo?" }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$uri = "https://$region-aiplatform.googleapis.com/v1/projects/$projectId/locations/$region/publishers/google/models/${model}:generateContent?key=$apiKey"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response = Invoke-RestMethod `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Uri         $uri `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Method      Post `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -ContentType "application/json" `</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    -Body        $body</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.candidates[0].content.parts[0].text</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="response-structure">Response structure<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#response-structure" class="hash-link" aria-label="Direct link to Response structure" title="Direct link to Response structure" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-compatible">OpenAI-compatible<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#openai-compatible" class="hash-link" aria-label="Direct link to OpenAI-compatible" title="Direct link to OpenAI-compatible" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.choices[0].message.content  # generated text</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.usage.total_tokens           # total token count</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.model                        # model used</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="native-gemini">Native Gemini<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#native-gemini" class="hash-link" aria-label="Direct link to Native Gemini" title="Direct link to Native Gemini" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.candidates[0].content.parts[0].text  # generated text</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.usageMetadata.totalTokenCount         # total token count</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$response.modelVersion                          # model version used</span></span><br></div></code></pre></div></div>
<p>For streaming (<code>streamGenerateContent</code>), an array of chunks is returned. Concatenate them to retrieve the full text.</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$fullText = ($response | ForEach-Object {</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    $_.candidates[0].content.parts[0].text</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">}) -join ""</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="adding-a-system-prompt">Adding a system prompt<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#adding-a-system-prompt" class="hash-link" aria-label="Direct link to Adding a system prompt" title="Direct link to Adding a system prompt" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-compatible-1">OpenAI-compatible<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#openai-compatible-1" class="hash-link" aria-label="Direct link to OpenAI-compatible" title="Direct link to OpenAI-compatible" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    model    = $model</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    messages = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role    = "system"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            content = "You are an AI assistant that responds in Japanese. Answer concisely."</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role    = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            content = "What is the speed of light?"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="native-gemini-1">Native Gemini<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#native-gemini-1" class="hash-link" aria-label="Direct link to Native Gemini" title="Direct link to Native Gemini" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    system_instruction = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        parts = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            @{ text = "You are an AI assistant that responds in Japanese. Answer concisely." }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    contents = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(@{ text = "What is the speed of light?" })</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="multi-turn-conversation">Multi-turn conversation<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#multi-turn-conversation" class="hash-link" aria-label="Direct link to Multi-turn conversation" title="Direct link to Multi-turn conversation" translate="no">​</a></h2>
<p>Place the conversation history in an array to achieve multi-turn conversation.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="openai-compatible-2">OpenAI-compatible<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#openai-compatible-2" class="hash-link" aria-label="Direct link to OpenAI-compatible" title="Direct link to OpenAI-compatible" translate="no">​</a></h3>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    model    = $model</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    messages = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{ role = "user";      content = "Do you prefer cats or dogs?" }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{ role = "assistant"; content = "I prefer cats." }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{ role = "user";      content = "Why is that?" }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="native-gemini-2">Native Gemini<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#native-gemini-2" class="hash-link" aria-label="Direct link to Native Gemini" title="Direct link to Native Gemini" translate="no">​</a></h3>
<p>The assistant role is specified as <code>"model"</code>.</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$body = @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    contents = @(</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(@{ text = "Do you prefer cats or dogs?" })</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "model"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(@{ text = "I prefer cats." })</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        @{</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            role  = "user"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">            parts = @(@{ text = "Why is that?" })</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        }</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    )</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">} | ConvertTo-Json -Depth 10</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="available-models">Available models<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#available-models" class="hash-link" aria-label="Direct link to Available models" title="Direct link to Available models" translate="no">​</a></h2>
<table><thead><tr><th>Model</th><th>OpenAI-compatible name</th><th>Description</th></tr></thead><tbody><tr><td><code>gemini-2.5-flash-lite</code></td><td><code>google/gemini-2.5-flash-lite</code></td><td>Lightweight, fast, low-cost</td></tr><tr><td><code>gemini-2.5-flash</code></td><td><code>google/gemini-2.5-flash</code></td><td>Balanced</td></tr><tr><td><code>gemini-2.5-pro</code></td><td><code>google/gemini-2.5-pro</code></td><td>High-precision, for complex tasks</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="which-approach-to-use">Which approach to use<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#which-approach-to-use" class="hash-link" aria-label="Direct link to Which approach to use" title="Direct link to Which approach to use" translate="no">​</a></h2>
<table><thead><tr><th>Situation</th><th>Recommended approach</th></tr></thead><tbody><tr><td>GCP-authenticated environment (dev, CI, etc.)</td><td>OpenAI-compatible + gcloud auth</td></tr><tr><td>Only an API key available</td><td>Native Gemini</td></tr><tr><td>Migrating from OpenAI</td><td>OpenAI-compatible (minimizes code changes)</td></tr><tr><td>Streaming required</td><td>Native Gemini</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="notes">Notes<a href="https://www.hikari-dev.com/en/blog/2026/04/03/vertex-ai-gemini-powershell#notes" class="hash-link" aria-label="Direct link to Notes" title="Direct link to Notes" translate="no">​</a></h2>
<ul>
<li class="">Do not hardcode the API key in scripts; load it from an environment variable (<code>$env:VERTEX_API_KEY</code>).</li>
<li class="">With gcloud auth, tokens expire in about 1 hour. Long-running scripts should refresh the token as needed.</li>
<li class="">Each project has its own rate limits and quotas. Check them before sending large numbers of requests.</li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AI" term="AI"/>
        <category label="PowerShell" term="PowerShell"/>
        <category label="GCP" term="GCP"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[What is CORS? An Explanation of Security for Beginners]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/04/02/cors-security</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security"/>
        <updated>2026-04-02T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[This article explains CORS (Cross-Origin Resource Sharing), a web browser security feature, for beginners, covering "why it's necessary" and "what dangers it entails." Understanding it correctly will enable secure web development.]]></summary>
        <content type="html"><![CDATA[<p>This article explains <strong>CORS (Cross-Origin Resource Sharing)</strong>, a web browser security feature, for beginners, covering "why it's necessary" and "what dangers it entails." Understanding it correctly will enable secure web development.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="the-background-of-the-need-for-cors-same-origin-policy">The Background of the Need for CORS: Same-Origin Policy<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#the-background-of-the-need-for-cors-same-origin-policy" class="hash-link" aria-label="Direct link to The Background of the Need for CORS: Same-Origin Policy" title="Direct link to The Background of the Need for CORS: Same-Origin Policy" translate="no">​</a></h2>
<p>In the early 1990s, when JavaScript was incorporated into browsers, the concept of web security was almost nonexistent. At that time, malicious websites could freely access data from other sites, making it easy for session hijacking and data theft to occur.</p>
<p>To solve this problem, a restriction known as the <strong>Same-Origin Policy</strong> was introduced. This is a simple yet powerful rule that states, "JavaScript loaded from a web page cannot access data from a different origin."</p>
<p>For example, JavaScript loaded from a page at <code>https://www.example.com</code> cannot access data from <code>https://www.bank.com</code>. This ensures that even if a user accesses a malicious site while logged into their bank site, their banking information cannot be stolen.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="what-is-an-origin">What is an Origin?<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#what-is-an-origin" class="hash-link" aria-label="Direct link to What is an Origin?" title="Direct link to What is an Origin?" translate="no">​</a></h3>
<p><strong>Origin</strong> is determined by the following three factors:</p>
<ul>
<li class=""><strong>Protocol</strong>: either <code>http://</code> or <code>https://</code></li>
<li class=""><strong>Host (domain)</strong>: either <code>example.com</code> or <code>api.example.com</code></li>
<li class=""><strong>Port</strong>: either <code>80</code> or <code>8080</code></li>
</ul>
<p>For example,</p>
<table><thead><tr><th>URL</th><th>Protocol</th><th>Host</th><th>Port</th><th>Origin</th></tr></thead><tbody><tr><td><code>https://www.example.com/page</code></td><td>HTTPS</td><td><a href="http://www.example.com/" target="_blank" rel="noopener noreferrer" class="">www.example.com</a></td><td>443 (default)</td><td><code>https://www.example.com</code></td></tr><tr><td><code>https://api.example.com/data</code></td><td>HTTPS</td><td>api.example.com</td><td>443 (default)</td><td><code>https://api.example.com</code></td></tr></tbody></table>
<p>Since these are different hosts, they are considered <strong>different origins</strong>.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="what-the-same-origin-policy-prevents">What the Same-Origin Policy Prevents<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#what-the-same-origin-policy-prevents" class="hash-link" aria-label="Direct link to What the Same-Origin Policy Prevents" title="Direct link to What the Same-Origin Policy Prevents" translate="no">​</a></h3>
<p>Requests to different origins via JavaScript's <strong>XHR (XMLHttpRequest)</strong> or <strong>Fetch API</strong> are restricted.</p>
<p>Example: A malicious script on evil.com</p>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">fetch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'https://bank.example.com/api/transfer'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">method</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'POST'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">body</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token known-class-name class-name">JSON</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">stringify</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">amount</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1000000</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<p>Without the Same-Origin Policy, JavaScript from a malicious site (<code>evil.com</code>) could send a transfer request while the user is logged into their bank site. <strong>Preventing this scenario is the purpose of the Same-Origin Policy</strong>.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="why-cors-is-necessary">Why CORS is Necessary<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#why-cors-is-necessary" class="hash-link" aria-label="Direct link to Why CORS is Necessary" title="Direct link to Why CORS is Necessary" translate="no">​</a></h2>
<p>However, modern web design often involves cooperation among multiple origins.</p>
<ul>
<li class=""><strong>Frontend</strong>: <code>https://www.example.com</code></li>
<li class=""><strong>API Server</strong>: <code>https://api.example.com</code></li>
<li class=""><strong>CDN / Static Files</strong>: <code>https://cdn.example.com</code></li>
</ul>
<p>These are <strong>operated by the same company and are legitimate communications</strong>. But if restricted by the Same-Origin Policy, the application would not function.</p>
<p>This is where CORS (Cross-Origin Resource Sharing) comes into play.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="what-is-cors-explicitly-allowing-access">What is CORS: Explicitly Allowing Access<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#what-is-cors-explicitly-allowing-access" class="hash-link" aria-label="Direct link to What is CORS: Explicitly Allowing Access" title="Direct link to What is CORS: Explicitly Allowing Access" translate="no">​</a></h2>
<p><strong>CORS is a mechanism by which the server explicitly declares, "requests from this origin are permitted."</strong></p>
<p>By simply returning the following response headers, the browser can relax the restrictions.</p>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Origin: https://www.example.com</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Methods: GET, POST, PUT</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Headers: Content-Type, Authorization</span></span><br></div></code></pre></div></div>
<p><strong>Unless the server says "allowed," the browser will not pass the results of the request back to JavaScript</strong>. This achieves cross-origin access while maintaining security.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="security-risks-of-cors-common-configuration-mistakes">Security Risks of CORS: Common Configuration Mistakes<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#security-risks-of-cors-common-configuration-mistakes" class="hash-link" aria-label="Direct link to Security Risks of CORS: Common Configuration Mistakes" title="Direct link to Security Risks of CORS: Common Configuration Mistakes" translate="no">​</a></h2>
<p>Although CORS is convenient, incorrect settings can create security vulnerabilities.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="mistake-allowing-all-origins">Mistake: Allowing All Origins<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#mistake-allowing-all-origins" class="hash-link" aria-label="Direct link to Mistake: Allowing All Origins" title="Direct link to Mistake: Allowing All Origins" translate="no">​</a></h3>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Origin: *</span></span><br></div></code></pre></div></div>
<p>This means, "Anyone from anywhere can access this server."</p>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic">// JavaScript from https://evil.com</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">fetch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'https://api.example.com/user/profile'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">then</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">r</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> r</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">json</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">then</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">data</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// Process to steal user profile information</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">data</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<p>This is particularly dangerous for requests that include authentication credentials (such as cookies), as a user logged into <code>api.example.com</code> could have their personal information stolen when accessing <code>evil.com</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="half-dangerous--prohibited-for-requests-including-cookies">Half Dangerous: <code>*</code> Prohibited for Requests Including Cookies<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#half-dangerous--prohibited-for-requests-including-cookies" class="hash-link" aria-label="Direct link to half-dangerous--prohibited-for-requests-including-cookies" title="Direct link to half-dangerous--prohibited-for-requests-including-cookies" translate="no">​</a></h3>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">fetch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'https://api.example.com/user/profile'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">credentials</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'include'</span><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// Include cookies</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span></span><br></div></code></pre></div></div>
<p>When including authentication credentials, <code>Access-Control-Allow-Origin: *</code> cannot be used. You must always <strong>specify a specific origin</strong>.</p>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Origin: https://www.example.com</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Credentials: true</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="mistake-allowing-user-specified-urls-directly">Mistake: Allowing User-Specified URLs Directly<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#mistake-allowing-user-specified-urls-directly" class="hash-link" aria-label="Direct link to Mistake: Allowing User-Specified URLs Directly" title="Direct link to Mistake: Allowing User-Specified URLs Directly" translate="no">​</a></h3>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic">// Dangerous implementation example (server-side)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> origin </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> request</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">headers</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Origin'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">response</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">headers</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Access-Control-Allow-Origin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> origin</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// Return as is!</span></span><br></div></code></pre></div></div>
<p>This can allow requests from <code>https://evil.com</code>, resulting in a response with <code>Access-Control-Allow-Origin: https://evil.com</code>, which can be exploited.</p>
<p><strong>The correct approach is to prepare a whitelist and allow only those origins.</strong></p>
<div class="language-javascript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-javascript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> allowedOrigins </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'https://www.example.com'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'https://admin.example.com'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">allowedOrigins</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">includes</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">origin</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  response</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">headers</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Access-Control-Allow-Origin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> origin</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="mistake-allowing-all-headers">Mistake: Allowing All Headers<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#mistake-allowing-all-headers" class="hash-link" aria-label="Direct link to Mistake: Allowing All Headers" title="Direct link to Mistake: Allowing All Headers" translate="no">​</a></h3>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Headers: *</span></span><br></div></code></pre></div></div>
<p>This means "Any header is accepted," allowing injections of malicious data through custom headers.</p>
<p><strong>List only the necessary headers.</strong></p>
<div class="language-http codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-http codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Access-Control-Allow-Headers: Content-Type, Authorization</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="cors-preflight-request-browsers-prior-check">CORS Preflight Request: Browser's Prior Check<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#cors-preflight-request-browsers-prior-check" class="hash-link" aria-label="Direct link to CORS Preflight Request: Browser's Prior Check" title="Direct link to CORS Preflight Request: Browser's Prior Check" translate="no">​</a></h2>
<p>For requests other than simple requests (GET, HEAD, POST), the browser automatically sends an <strong>OPTIONS method</strong> request to check "Is this okay?" This is known as a preflight request.</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">1. JavaScript tries to send a PUT request</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">2. The browser automatically sends an OPTIONS preflight request</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    OPTIONS /api/resource HTTP/1.1</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Origin: https://www.example.com</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Request-Method: PUT</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Request-Headers: Content-Type</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">3. The server responds with "OK"</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    HTTP 200 OK</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Allow-Origin: https://www.example.com</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Allow-Methods: PUT</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Access-Control-Allow-Headers: Content-Type</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">4. The browser sends the actual PUT request</span></span><br></div></code></pre></div></div>
<p>If the server does not support the <code>OPTIONS</code> method, the preflight will fail, and the actual request will not be sent.</p>
<p><strong>Key Points:</strong></p>
<ul>
<li class="">Explicitly specify allowed origins in the whitelist</li>
<li class="">Use <code>credentials: true</code> to handle requests including cookie authentication</li>
<li class="">Allow only necessary methods and headers</li>
<li class="">Options preflight request</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="common-questions">Common Questions<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#common-questions" class="hash-link" aria-label="Direct link to Common Questions" title="Direct link to Common Questions" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="q-i-encountered-a-cors-error-can-i-allow-all-origins-to-resolve-it">Q. I encountered a CORS error. Can I allow all origins to resolve it?<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#q-i-encountered-a-cors-error-can-i-allow-all-origins-to-resolve-it" class="hash-link" aria-label="Direct link to Q. I encountered a CORS error. Can I allow all origins to resolve it?" title="Direct link to Q. I encountered a CORS error. Can I allow all origins to resolve it?" translate="no">​</a></h3>
<p><strong>A:</strong> No. It might work temporarily, but allowing <code>*</code> in a production environment poses a security risk. You need to revisit the server-side settings or redesign the API.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="q-i-want-to-access-origins-at-different-ports-during-local-development-is-that-okay">Q. I want to access origins at different ports during local development. Is that okay?<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#q-i-want-to-access-origins-at-different-ports-during-local-development-is-that-okay" class="hash-link" aria-label="Direct link to Q. I want to access origins at different ports during local development. Is that okay?" title="Direct link to Q. I want to access origins at different ports during local development. Is that okay?" translate="no">​</a></h3>
<p><strong>A:</strong> Disabling CORS just for the local development environment is acceptable.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="q-does-cors-matter-when-calling-apis-from-mobile-apps">Q. Does CORS matter when calling APIs from mobile apps?<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#q-does-cors-matter-when-calling-apis-from-mobile-apps" class="hash-link" aria-label="Direct link to Q. Does CORS matter when calling APIs from mobile apps?" title="Direct link to Q. Does CORS matter when calling APIs from mobile apps?" translate="no">​</a></h3>
<p><strong>A:</strong> CORS is a browser security feature, so it <strong>does not apply to mobile apps</strong>. Instead, you need to implement authentication and authorization using API keys or OAuth.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="summary">Summary<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#summary" class="hash-link" aria-label="Direct link to Summary" title="Direct link to Summary" translate="no">​</a></h2>
<table><thead><tr><th>Point</th><th>Explanation</th></tr></thead><tbody><tr><td><strong>Purpose of CORS</strong></td><td>Allow cross-origin access while maintaining browser security</td></tr><tr><td><strong>Dangerous Configuration</strong></td><td>Using <code>Access-Control-Allow-Origin: *</code> for APIs requiring authentication</td></tr><tr><td><strong>Correct Configuration</strong></td><td>Explicitly specify allowed origins in the whitelist</td></tr><tr><td><strong>When Including Cookies</strong></td><td>Must specify <code>Access-Control-Allow-Credentials: true</code> and a specific origin</td></tr><tr><td><strong>Preflight</strong></td><td>Complex requests like PUT/DELETE require the browser to pre-check with OPTIONS</td></tr></tbody></table>
<p>CORS is not just a "cause of errors," but an important mechanism in web security. Misconfigurations can lead to security incidents, so it must be handled with care.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="references">References<a href="https://www.hikari-dev.com/en/blog/2026/04/02/cors-security#references" class="hash-link" aria-label="Direct link to References" title="Direct link to References" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/CORS" target="_blank" rel="noopener noreferrer" class="">MDN Web Docs - CORS (Cross-Origin Resource Sharing)</a></li>
<li class=""><a href="https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy" target="_blank" rel="noopener noreferrer" class="">Same-origin policy - MDN Web Docs</a></li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="Web" term="Web"/>
        <category label="Security" term="Security"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Development of the translation CLI tool translate-mcp supporting multiple languages using OpenAI API]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp"/>
        <updated>2026-04-02T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[translate-mcp is a translation tool that utilizes OpenAI's API. It supports both CLI mode and MCP server usage. It is useful in a wide range of scenarios, from translating an entire file to being integrated into AI tools.]]></summary>
        <content type="html"><![CDATA[<p>translate-mcp is a translation tool that utilizes OpenAI's API. It supports both CLI mode and MCP server usage. It is useful in a wide range of scenarios, from translating an entire file to being integrated into AI tools.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="what-is-translate-mcp">What is translate-mcp<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#what-is-translate-mcp" class="hash-link" aria-label="Direct link to What is translate-mcp" title="Direct link to What is translate-mcp" translate="no">​</a></h2>
<p><a href="https://github.com/Himeyama/translate-mcp" target="_blank" rel="noopener noreferrer" class="">translate-mcp</a> is a <strong>translation-specific tool using the OpenAI API</strong>. It is implemented in Python and has two usage modes.</p>
<ol>
<li class=""><strong>CLI Mode</strong>: Translate files directly from the command line.</li>
<li class=""><strong>MCP Server Mode</strong>: Operates as a Model Context Protocol (MCP) server, integrating with AI tools.</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="features">Features<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#features" class="hash-link" aria-label="Direct link to Features" title="Direct link to Features" translate="no">​</a></h2>
<ul>
<li class=""><strong>Multi-language support</strong>: Supports various languages.</li>
<li class=""><strong>Simple usage</strong>: Can be started with just one API key.</li>
<li class=""><strong>Two usage modes</strong>: Operates both as a CLI script and as an MCP server.</li>
<li class=""><strong>Lightweight</strong>: Relies solely on the OpenAI API without dependency on external libraries.</li>
<li class=""><strong>Error handling</strong>: In CLI mode, errors are returned in stderr, while in MCP mode, errors are returned in JSON format.</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="setup">Setup<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#setup" class="hash-link" aria-label="Direct link to Setup" title="Direct link to Setup" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="prerequisites">Prerequisites<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites" translate="no">​</a></h3>
<ul>
<li class="">Python must be installed.</li>
<li class="">An OpenAI API key must be obtained.</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="installing-uv">Installing uv<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#installing-uv" class="hash-link" aria-label="Direct link to Installing uv" title="Direct link to Installing uv" translate="no">​</a></h3>
<p>Since translate-mcp is managed by <code>uv</code>, you first need to install <code>uv</code>.</p>
<p>For installation instructions, refer to <a href="https://docs.astral.sh/uv/getting-started/installation/" target="_blank" rel="noopener noreferrer" class="">Installation | uv</a>.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># macOS / Linux</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">curl</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-LsSf</span><span class="token plain"> https://astral.sh/uv/install.sh </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Windows (PowerShell)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">powershell </span><span class="token parameter variable" style="color:#36acaa">-ExecutionPolicy</span><span class="token plain"> ByPass </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"irm https://astral.sh/uv/install.ps1 | iex"</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="installing-translate-mcp">Installing translate-mcp<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#installing-translate-mcp" class="hash-link" aria-label="Direct link to Installing translate-mcp" title="Direct link to Installing translate-mcp" translate="no">​</a></h3>
<p>You can install it using the following command with <code>uv</code>.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">uv tool </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> git+https://github.com/Himeyama/translate-mcp</span></span><br></div></code></pre></div></div>
<p>Alternatively, you can run it directly without installation using <code>uvx</code>.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">uvx git+https://github.com/Himeyama/translate-mcp </span><span class="token parameter variable" style="color:#36acaa">--help</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="how-to-use">How to Use<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#how-to-use" class="hash-link" aria-label="Direct link to How to Use" title="Direct link to How to Use" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="cli-mode">CLI Mode<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#cli-mode" class="hash-link" aria-label="Direct link to CLI Mode" title="Direct link to CLI Mode" translate="no">​</a></h3>
<p>To translate a file, run the following command:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token parameter variable" style="color:#36acaa">--input</span><span class="token plain"> blog/2026-04-02-example.md </span><span class="token parameter variable" style="color:#36acaa">--from</span><span class="token plain"> Japanese </span><span class="token parameter variable" style="color:#36acaa">--to</span><span class="token plain"> English</span></span><br></div></code></pre></div></div>
<p>The result will be output to standard output. You can save it to a file using redirection.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--input</span><span class="token plain"> blog/2026-04-02-example.md </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--from</span><span class="token plain"> Japanese </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--to</span><span class="token plain"> English </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--output</span><span class="token plain"> i18n/en/blog/2026-04-02-example.md</span></span><br></div></code></pre></div></div>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="parameters">Parameters<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#parameters" class="hash-link" aria-label="Direct link to Parameters" title="Direct link to Parameters" translate="no">​</a></h4>
<ul>
<li class=""><code>--mcp</code>: MCP mode</li>
<li class=""><code>--input</code>: Path to the file to be translated</li>
<li class=""><code>--from</code>: Source language (e.g., Japanese, English)</li>
<li class=""><code>--to</code>: Target language (e.g., English, Taiwanese)</li>
<li class=""><code>--output</code> (optional): Destination to save the translated text</li>
<li class=""><code>--model</code> (optional): OpenAI model (e.g., gpt-5-mini)</li>
<li class=""><code>--debug</code> (optional): Debug mode</li>
</ul>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="in-case-of-errors">In case of errors<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#in-case-of-errors" class="hash-link" aria-label="Direct link to In case of errors" title="Direct link to In case of errors" translate="no">​</a></h4>
<p>If an error occurs, it will be output to stderr.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="mcp-server-mode">MCP Server Mode<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#mcp-server-mode" class="hash-link" aria-label="Direct link to MCP Server Mode" title="Direct link to MCP Server Mode" translate="no">​</a></h3>
<p>Start it as an MCP server, making it accessible from Claude Code and other AI tools.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token parameter variable" style="color:#36acaa">--mcp</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="practical-examples">Practical Examples<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#practical-examples" class="hash-link" aria-label="Direct link to Practical Examples" title="Direct link to Practical Examples" translate="no">​</a></h2>
<p>This section describes how to translate a blog article from Japanese to English and Traditional Chinese (Taiwan).</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="japanese-version-original-article">Japanese Version (Original Article)<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#japanese-version-original-article" class="hash-link" aria-label="Direct link to Japanese Version (Original Article)" title="Direct link to Japanese Version (Original Article)" translate="no">​</a></h3>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic"># Japanese article exists in blog/2026-04-02-example.md</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="generate-english-version">Generate English Version<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#generate-english-version" class="hash-link" aria-label="Direct link to Generate English Version" title="Direct link to Generate English Version" translate="no">​</a></h3>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--input</span><span class="token plain"> blog/2026-04-02-example.md </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--from</span><span class="token plain"> Japanese </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--to</span><span class="token plain"> English </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> i18n/en/docusaurus-plugin-content-blog/2026-04-02-example.md</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="generate-taiwan-version-traditional-chinese">Generate Taiwan Version (Traditional Chinese)<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#generate-taiwan-version-traditional-chinese" class="hash-link" aria-label="Direct link to Generate Taiwan Version (Traditional Chinese)" title="Direct link to Generate Taiwan Version (Traditional Chinese)" translate="no">​</a></h3>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">translate </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--input</span><span class="token plain"> blog/2026-04-02-example.md </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--from</span><span class="token plain"> Japanese </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token parameter variable" style="color:#36acaa">--to</span><span class="token plain"> Taiwanese </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> i18n/zh-TW/docusaurus-plugin-content-blog/2026-04-02-example.md</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="advantages-and-disadvantages">Advantages and Disadvantages<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#advantages-and-disadvantages" class="hash-link" aria-label="Direct link to Advantages and Disadvantages" title="Direct link to Advantages and Disadvantages" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="advantages">Advantages<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#advantages" class="hash-link" aria-label="Direct link to Advantages" title="Direct link to Advantages" translate="no">​</a></h3>
<ul>
<li class=""><strong>High accuracy</strong>: Uses OpenAI's high-quality models (such as GPT-4).</li>
<li class=""><strong>Skill support</strong>: Can be integrated with various tools like ChatGPT and Claude.</li>
<li class=""><strong>Simplicity</strong>: Very easy to set up and use.</li>
<li class=""><strong>Customizable</strong>: The source code is open, allowing for customization.</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="disadvantages">Disadvantages<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#disadvantages" class="hash-link" aria-label="Direct link to Disadvantages" title="Direct link to Disadvantages" translate="no">​</a></h3>
<ul>
<li class=""><strong>API costs</strong>: Costs incurred from OpenAI API usage based on translation volume.</li>
<li class=""><strong>Internet connection required</strong>: Cannot be used offline as API calls are necessary.</li>
<li class=""><strong>Rate limiting</strong>: Subject to OpenAI API's rate limits.</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="conclusion">Conclusion<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#conclusion" class="hash-link" aria-label="Direct link to Conclusion" title="Direct link to Conclusion" translate="no">​</a></h2>
<p>translate-mcp is a <strong>simple and high-quality translation tool</strong> that leverages the OpenAI API. It is effective in various scenarios, including multi-language support for blog articles, document translation, and integration into AI tools.</p>
<p>In particular, it is effective to use as an automation script for supporting multiple languages in static site generators like Docusaurus.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="references">References<a href="https://www.hikari-dev.com/en/blog/2026/04/02/translate-mcp#references" class="hash-link" aria-label="Direct link to References" title="Direct link to References" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://github.com/Himeyama/translate-mcp" target="_blank" rel="noopener noreferrer" class="">GitHub - Himeyama/translate-mcp</a></li>
<li class=""><a href="https://platform.openai.com/docs" target="_blank" rel="noopener noreferrer" class="">OpenAI API Documentation</a></li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="MCP" term="MCP"/>
        <category label="translation" term="translation"/>
        <category label="OpenAI" term="OpenAI"/>
        <category label="Python" term="Python"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Comparing Anthropic API and AWS Bedrock Pricing]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/03/30/anthropic-api-vs-bedrock-price</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/03/30/anthropic-api-vs-bedrock-price"/>
        <updated>2026-03-30T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[When using Claude via API, you have more than two options: in addition to calling the Anthropic API directly, you can also use it via AWS Bedrock, Google Vertex AI, or Microsoft Azure (Azure AI Foundry). Base pricing is the same across all routes, but there are differences in batch processing and cloud ecosystem integration.]]></summary>
        <content type="html"><![CDATA[<p>When using Claude via API, you have more than two options: in addition to calling the <strong>Anthropic API directly</strong>, you can also use it via <strong>AWS Bedrock</strong>, <strong>Google Vertex AI</strong>, or <strong>Microsoft Azure (Azure AI Foundry)</strong>. Base pricing is the same across all routes, but there are differences in batch processing and cloud ecosystem integration.</p>
<!-- -->
<blockquote>
<p>Unit: USD / 1M tokens (MTok). Information as of March 2026.</p>
</blockquote>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="on-demand-base-pricing">On-Demand Base Pricing<a href="https://www.hikari-dev.com/en/blog/2026/03/30/anthropic-api-vs-bedrock-price#on-demand-base-pricing" class="hash-link" aria-label="Direct link to On-Demand Base Pricing" title="Direct link to On-Demand Base Pricing" translate="no">​</a></h2>
<table><thead><tr><th>Model</th><th>Type</th><th style="text-align:center">Anthropic API</th><th style="text-align:center">Bedrock</th><th style="text-align:center">Vertex AI</th><th style="text-align:center">Azure</th></tr></thead><tbody><tr><td><strong>Claude Opus 4.6</strong></td><td>Input</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td></tr><tr><td></td><td>Output</td><td style="text-align:center">$25.00</td><td style="text-align:center">$25.00</td><td style="text-align:center">$25.00</td><td style="text-align:center">$25.00</td></tr><tr><td><strong>Claude Sonnet 4.6</strong></td><td>Input</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td></tr><tr><td></td><td>Output</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td></tr><tr><td><strong>Claude Haiku 4.5</strong></td><td>Input</td><td style="text-align:center">$1.00</td><td style="text-align:center">$1.00</td><td style="text-align:center">$1.00</td><td style="text-align:center">$1.00</td></tr><tr><td></td><td>Output</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td><td style="text-align:center">$5.00</td></tr><tr><td><strong>Claude Sonnet 4.5</strong></td><td>Input</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td><td style="text-align:center">$3.00</td></tr><tr><td></td><td>Output</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td><td style="text-align:center">$15.00</td></tr></tbody></table>
<p><strong>Base pricing is identical across all routes.</strong></p>
<p>Note that Vertex AI regional endpoints carry a <strong>10% surcharge</strong> over global endpoint pricing. Bedrock offers Long Context variants as separate SKUs at the same price; on the Anthropic API, Long Context is integrated into the standard models.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="cache-pricing">Cache Pricing<a href="https://www.hikari-dev.com/en/blog/2026/03/30/anthropic-api-vs-bedrock-price#cache-pricing" class="hash-link" aria-label="Direct link to Cache Pricing" title="Direct link to Cache Pricing" translate="no">​</a></h2>
<p>Prompt Caching rates are also identical across all routes.</p>
<table><thead><tr><th>Model</th><th>Cache Type</th><th style="text-align:center">Anthropic API</th><th style="text-align:center">Bedrock</th><th style="text-align:center">Vertex AI</th><th style="text-align:center">Azure</th></tr></thead><tbody><tr><td><strong>Claude Opus 4.6</strong></td><td>5-min cache write</td><td style="text-align:center">$6.25</td><td style="text-align:center">$6.25</td><td style="text-align:center">$6.25</td><td style="text-align:center">$6.25</td></tr><tr><td></td><td>1-hour cache write</td><td style="text-align:center">$10.00</td><td style="text-align:center">$10.00</td><td style="text-align:center">$10.00</td><td style="text-align:center">$10.00</td></tr><tr><td></td><td>Cache read</td><td style="text-align:center">$0.50</td><td style="text-align:center">$0.50</td><td style="text-align:center">$0.50</td><td style="text-align:center">$0.50</td></tr><tr><td><strong>Claude Sonnet 4.6</strong></td><td>5-min cache write</td><td style="text-align:center">$3.75</td><td style="text-align:center">$3.75</td><td style="text-align:center">$3.75</td><td style="text-align:center">$3.75</td></tr><tr><td></td><td>1-hour cache write</td><td style="text-align:center">$6.00</td><td style="text-align:center">$6.00</td><td style="text-align:center">$6.00</td><td style="text-align:center">$6.00</td></tr><tr><td></td><td>Cache read</td><td style="text-align:center">$0.30</td><td style="text-align:center">$0.30</td><td style="text-align:center">$0.30</td><td style="text-align:center">$0.30</td></tr><tr><td><strong>Claude Haiku 4.5</strong></td><td>5-min cache write</td><td style="text-align:center">$1.25</td><td style="text-align:center">$1.25</td><td style="text-align:center">$1.25</td><td style="text-align:center">$1.25</td></tr><tr><td></td><td>1-hour cache write</td><td style="text-align:center">$2.00</td><td style="text-align:center">$2.00</td><td style="text-align:center">$2.00</td><td style="text-align:center">$2.00</td></tr><tr><td></td><td>Cache read</td><td style="text-align:center">$0.10</td><td style="text-align:center">$0.10</td><td style="text-align:center">$0.10</td><td style="text-align:center">$0.10</td></tr></tbody></table>
<p>Cache writes come in two TTL tiers: 5-minute (short-term) and 1-hour (long-term). Longer TTL means higher write cost, but for applications with lengthy system prompts that are read repeatedly, the savings on read pricing more than compensate.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="batch-processing-pricing">Batch Processing Pricing<a href="https://www.hikari-dev.com/en/blog/2026/03/30/anthropic-api-vs-bedrock-price#batch-processing-pricing" class="hash-link" aria-label="Direct link to Batch Processing Pricing" title="Direct link to Batch Processing Pricing" translate="no">​</a></h2>
<p>Bedrock, Vertex AI, and the Anthropic API all offer an asynchronous batch API at <strong>50% off</strong> on-demand pricing. Azure does not explicitly list batch pricing at this time.</p>
<table><thead><tr><th>Model</th><th style="text-align:center">Batch Input</th><th style="text-align:center">Batch Output</th></tr></thead><tbody><tr><td><strong>Claude Opus 4.6</strong></td><td style="text-align:center">$2.50</td><td style="text-align:center">$12.50</td></tr><tr><td><strong>Claude Sonnet 4.6</strong></td><td style="text-align:center">$1.50</td><td style="text-align:center">$7.50</td></tr><tr><td><strong>Claude Haiku 4.5</strong></td><td style="text-align:center">$0.50</td><td style="text-align:center">$2.50</td></tr><tr><td><strong>Claude Sonnet 4.5</strong></td><td style="text-align:center">$1.50</td><td style="text-align:center">$7.50</td></tr></tbody></table>
<p>For large-scale batch workloads (log analysis, embedding generation, etc.), any of these routes can cut costs in half.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="ecosystem-comparison">Ecosystem Comparison<a href="https://www.hikari-dev.com/en/blog/2026/03/30/anthropic-api-vs-bedrock-price#ecosystem-comparison" class="hash-link" aria-label="Direct link to Ecosystem Comparison" title="Direct link to Ecosystem Comparison" translate="no">​</a></h2>
<table><thead><tr><th>Feature</th><th style="text-align:center">Anthropic API</th><th style="text-align:center">Bedrock</th><th style="text-align:center">Vertex AI</th><th style="text-align:center">Azure</th></tr></thead><tbody><tr><td>Base pricing</td><td style="text-align:center">Same</td><td style="text-align:center">Same</td><td style="text-align:center">Same</td><td style="text-align:center">Same</td></tr><tr><td>Regional surcharge</td><td style="text-align:center">—</td><td style="text-align:center">—</td><td style="text-align:center">+10% (regional)</td><td style="text-align:center">—</td></tr><tr><td>Batch processing (50% off)</td><td style="text-align:center">○</td><td style="text-align:center">○</td><td style="text-align:center">○</td><td style="text-align:center">Not listed</td></tr><tr><td>Tokyo region</td><td style="text-align:center">—</td><td style="text-align:center">○</td><td style="text-align:center">○</td><td style="text-align:center">—</td></tr><tr><td>IAM / audit log integration</td><td style="text-align:center">—</td><td style="text-align:center">AWS</td><td style="text-align:center">Google Cloud</td><td style="text-align:center">Azure</td></tr><tr><td>VPC / PrivateLink</td><td style="text-align:center">—</td><td style="text-align:center">○</td><td style="text-align:center">○</td><td style="text-align:center">○</td></tr><tr><td>Billing integration</td><td style="text-align:center">Anthropic direct</td><td style="text-align:center">AWS</td><td style="text-align:center">Google Cloud</td><td style="text-align:center">Azure</td></tr><tr><td>New feature rollout speed</td><td style="text-align:center">Fastest</td><td style="text-align:center">Delayed</td><td style="text-align:center">Delayed</td><td style="text-align:center">Delayed</td></tr></tbody></table>
<p>New features (such as Extended Thinking) roll out to the Anthropic API first; Vertex AI, Bedrock, and Azure typically follow weeks later.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="which-should-you-choose">Which Should You Choose?<a href="https://www.hikari-dev.com/en/blog/2026/03/30/anthropic-api-vs-bedrock-price#which-should-you-choose" class="hash-link" aria-label="Direct link to Which Should You Choose?" title="Direct link to Which Should You Choose?" translate="no">​</a></h2>
<ul>
<li class=""><strong>Simple setup / prototyping</strong>: Anthropic API requires just one API key and gets new features first.</li>
<li class=""><strong>Deep AWS integration</strong>: If you need IAM, CloudWatch, or VPC, Bedrock is the natural choice. Tokyo region supported.</li>
<li class=""><strong>Deep Google Cloud integration</strong>: Vertex AI fits right in. Note the 10% surcharge on regional endpoints.</li>
<li class=""><strong>Deep Azure integration</strong>: Available via Azure AI Foundry, integrated with Azure billing and management.</li>
<li class=""><strong>Heavy batch workloads</strong>: Bedrock, Vertex AI, and the Anthropic API all offer 50% off batch pricing.</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="references">References<a href="https://www.hikari-dev.com/en/blog/2026/03/30/anthropic-api-vs-bedrock-price#references" class="hash-link" aria-label="Direct link to References" title="Direct link to References" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://www.anthropic.com/pricing#anthropic-api" target="_blank" rel="noopener noreferrer" class="">Anthropic API Pricing – Claude API Docs</a></li>
<li class=""><a href="https://aws.amazon.com/bedrock/pricing/" target="_blank" rel="noopener noreferrer" class="">AWS Bedrock Pricing – Amazon Web Services</a></li>
<li class=""><a href="https://cloud.google.com/vertex-ai/generative-ai/pricing" target="_blank" rel="noopener noreferrer" class="">Vertex AI Pricing – Google Cloud</a></li>
<li class=""><a href="https://platform.claude.com/docs/en/build-with-claude/claude-in-microsoft-foundry" target="_blank" rel="noopener noreferrer" class="">Claude in Microsoft Azure AI Foundry – Claude API Docs</a></li>
</ul>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AI" term="AI"/>
        <category label="AWS" term="AWS"/>
        <category label="Claude" term="Claude"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Why Bold Text Uses Gothic (Sans-serif) Font in Japanese Typography]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/03/29/japanese-bold-serif-gothic</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/03/29/japanese-bold-serif-gothic"/>
        <updated>2026-03-29T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Even when body text uses Mincho (serif) typeface, bold text typically renders in Gothic (sans-serif). This is an intentional design choice rooted in readability, visual clarity, and historical printing conventions.]]></summary>
        <content type="html"><![CDATA[<p>Even when body text uses Mincho (serif) typeface, <strong>bold text typically renders in Gothic (sans-serif)</strong>. This is an intentional design choice rooted in readability, visual clarity, and historical printing conventions.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="readability">Readability<a href="https://www.hikari-dev.com/en/blog/2026/03/29/japanese-bold-serif-gothic#readability" class="hash-link" aria-label="Direct link to Readability" title="Direct link to Readability" translate="no">​</a></h2>
<p>Simply bolding Mincho type creates a severe contrast between the serifs and main strokes, causing the <strong>counters</strong> (the enclosed or partially enclosed spaces within a character) to collapse — especially at small sizes on screens. The result is dense, hard-to-read text.</p>
<p>Gothic type lacks serifs entirely, so increasing the weight preserves counters and maintains legibility.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="visual-clarity">Visual Clarity<a href="https://www.hikari-dev.com/en/blog/2026/03/29/japanese-bold-serif-gothic#visual-clarity" class="hash-link" aria-label="Direct link to Visual Clarity" title="Direct link to Visual Clarity" translate="no">​</a></h2>
<p>Switching font families entirely sends a clearer "this is emphasized" signal to the human visual system than merely darkening the same typeface. The contrast between Mincho body text and Gothic bold is immediately recognizable as intentional emphasis.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="historical-convention">Historical Convention<a href="https://www.hikari-dev.com/en/blog/2026/03/29/japanese-bold-serif-gothic#historical-convention" class="hash-link" aria-label="Direct link to Historical Convention" title="Direct link to Historical Convention" translate="no">​</a></h2>
<p>In traditional Japanese letterpress printing, <strong>emphasis was expressed by switching typefaces rather than increasing weight</strong>. Casting heavier Mincho type posed physical constraints, so Gothic — a structurally distinct face — was used for emphasis instead. This convention carried over into digital typesetting and the web.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="css-implementation">CSS Implementation<a href="https://www.hikari-dev.com/en/blog/2026/03/29/japanese-bold-serif-gothic#css-implementation" class="hash-link" aria-label="Direct link to CSS Implementation" title="Direct link to CSS Implementation" translate="no">​</a></h2>
<p>When using Mincho as the base typeface on the web, switching to Gothic for bold elements is straightforward:</p>
<div class="language-css codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-css codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token selector" style="color:#00009f">body</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">font-family</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Noto Serif JP"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> serif</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token selector" style="color:#00009f">strong</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> b</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h1</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h2</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h3</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h4</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h5</span><span class="token selector punctuation" style="color:#393A34">,</span><span class="token selector" style="color:#00009f"> h6</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">font-family</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Noto Sans JP"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> sans-serif</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">font-weight</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">700</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<p>This approach also has a practical advantage: only two weights need to be loaded — Regular Mincho for body text and Bold Gothic for emphasis — reducing font delivery overhead.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="summary">Summary<a href="https://www.hikari-dev.com/en/blog/2026/03/29/japanese-bold-serif-gothic#summary" class="hash-link" aria-label="Direct link to Summary" title="Direct link to Summary" translate="no">​</a></h2>
<p>Three reasons Japanese bold text uses Gothic type:</p>
<ol>
<li class=""><strong>Readability</strong>: Gothic maintains counters at higher weights, keeping text legible</li>
<li class=""><strong>Visual clarity</strong>: A typeface switch communicates emphasis more effectively than weight alone</li>
<li class=""><strong>Convention</strong>: The letterpress-era rule of "use a different face for emphasis" carried over into digital and web typography</li>
</ol>
<p>This combination is rational from both a design and web performance perspective.</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="デザイン" term="デザイン"/>
        <category label="CSS" term="CSS"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[How I Achieved Near-Perfect Lighthouse Scores on a Docusaurus Blog — SEO, Performance & Accessibility]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance"/>
        <updated>2026-03-28T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[I improved this blog's mobile Lighthouse scores to Performance 99, Accessibility 100, Best Practices 100, and SEO 100. Here's what I did, broken down into SEO, performance, and accessibility improvements.]]></summary>
        <content type="html"><![CDATA[<p>I improved this blog's mobile Lighthouse scores to <strong>Performance 99, Accessibility 100, Best Practices 100, and SEO 100</strong>. Here's what I did, broken down into SEO, performance, and accessibility improvements.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="problems-before-the-improvements">Problems Before the Improvements<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#problems-before-the-improvements" class="hash-link" aria-label="Direct link to Problems Before the Improvements" title="Direct link to Problems Before the Improvements" translate="no">​</a></h2>
<p>Running Lighthouse on the Docusaurus blog revealed several issues:</p>
<ul>
<li class=""><strong>SEO</strong>: No meta description, no OGP/Twitter Cards, no structured data, no sitemap priority</li>
<li class=""><strong>Performance</strong>: Synchronous Google Tag Manager (GTM) loading causing large unused JS, external CDN avatar fetching as a bottleneck</li>
<li class=""><strong>Accessibility</strong>: Primary color contrast ratio failing WCAG AA requirements</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="seo-improvements">SEO Improvements<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#seo-improvements" class="hash-link" aria-label="Direct link to SEO Improvements" title="Direct link to SEO Improvements" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="adding-meta-description-ogp--twitter-cards">Adding meta description, OGP &amp; Twitter Cards<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#adding-meta-description-ogp--twitter-cards" class="hash-link" aria-label="Direct link to Adding meta description, OGP &amp; Twitter Cards" title="Direct link to Adding meta description, OGP &amp; Twitter Cards" translate="no">​</a></h3>
<p>I added default site-wide metadata to <code>themeConfig.metadata</code> in <code>docusaurus.config.ts</code>:</p>
<div class="language-ts codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ts codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">themeConfig</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  metadata</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'description'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> content</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Hikari's tech notebook..."</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> property</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'og:locale'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> content</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'ja_JP'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'twitter:card'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> content</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'summary_large_image'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'twitter:site'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> content</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@ptrqr'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<p>I also swizzled <code>src/theme/Layout/index.tsx</code> to provide locale-specific fallback descriptions for pages without their own description (blog listing, tag pages, etc.).</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="adding-robotstxt">Adding robots.txt<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#adding-robotstxt" class="hash-link" aria-label="Direct link to Adding robots.txt" title="Direct link to Adding robots.txt" translate="no">​</a></h3>
<p>Added <code>static/robots.txt</code> to explicitly point crawlers to the sitemap.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="blogposting-json-ld-structured-data">BlogPosting JSON-LD (Structured Data)<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#blogposting-json-ld-structured-data" class="hash-link" aria-label="Direct link to BlogPosting JSON-LD (Structured Data)" title="Direct link to BlogPosting JSON-LD (Structured Data)" translate="no">​</a></h3>
<p>I initially swizzled <code>src/theme/BlogPostItem/index.tsx</code> to output <code>BlogPosting</code> JSON-LD on article pages with <code>headline</code>, <code>datePublished</code>, <code>dateModified</code>, and <code>author</code>.</p>
<p>Later I discovered that Docusaurus's built-in <code>BlogPostPage/StructuredData</code> already outputs equivalent data. I removed the custom JSON-LD and instead added a <code>keywords</code> fallback (<code>frontMatter.keywords</code> → <code>tags</code>) to the built-in component. Duplicate structured data can hurt SEO, so this cleanup was important.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="website-json-ld">WebSite JSON-LD<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#website-json-ld" class="hash-link" aria-label="Direct link to WebSite JSON-LD" title="Direct link to WebSite JSON-LD" translate="no">​</a></h3>
<p>Added <code>WebSite</code> type JSON-LD in <code>docusaurus.config.ts</code>'s <code>headTags</code> to help Google correctly identify the site name.</p>
<div class="language-ts codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ts codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">headTags</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    tagName</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'script'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    attributes</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'application/ld+json'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    innerHTML</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">JSON</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">stringify</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token string-property property" style="color:#36acaa">'@context'</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'https://schema.org'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token string-property property" style="color:#36acaa">'@type'</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'WebSite'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'ひかりの備忘録'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'https://www.hikari-dev.com/'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="auto-generated-ogp-images-for-all-posts">Auto-Generated OGP Images for All Posts<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#auto-generated-ogp-images-for-all-posts" class="hash-link" aria-label="Direct link to Auto-Generated OGP Images for All Posts" title="Direct link to Auto-Generated OGP Images for All Posts" translate="no">​</a></h3>
<p>Created <code>scripts/generate-ogp.js</code> to automatically generate OGP images with tag-based gradient backgrounds. This ensures every post has an eye-catching image when shared on social media. All posts now have an <code>image:</code> field in their frontmatter.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="sitemap-improvements">Sitemap Improvements<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#sitemap-improvements" class="hash-link" aria-label="Direct link to Sitemap Improvements" title="Direct link to Sitemap Improvements" translate="no">​</a></h3>
<p>Used the <code>createSitemapItems</code> callback to set the homepage priority to <code>1.0</code> and blog posts to <code>0.8</code>. Also added automatic <code>lastmod</code> extraction from the date in each URL.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="hreflang-x-default">hreflang x-default<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#hreflang-x-default" class="hash-link" aria-label="Direct link to hreflang x-default" title="Direct link to hreflang x-default" translate="no">​</a></h3>
<p>In <code>src/theme/Root.tsx</code>, I inject an <code>hreflang="x-default"</code> <code>&lt;link&gt;</code> tag on every page, mapping English pages (<code>/en/...</code>) back to the default (Japanese) URL. This helps search engines correctly identify language variants.</p>
<div class="language-tsx codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-tsx codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> defaultPath </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> pathname</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">replace</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex escape" style="color:#36acaa">\/</span><span class="token regex regex-source language-regex" style="color:#36acaa">en</span><span class="token regex regex-source language-regex group punctuation" style="color:#393A34">(?=</span><span class="token regex regex-source language-regex escape" style="color:#36acaa">\/</span><span class="token regex regex-source language-regex alternation keyword" style="color:#00009f">|</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">$</span><span class="token regex regex-source language-regex group punctuation" style="color:#393A34">)</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'/'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> xDefaultUrl </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">siteConfig</span><span class="token template-string interpolation punctuation" style="color:#393A34">.</span><span class="token template-string interpolation">url</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">defaultPath</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">Head</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">link</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">rel</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">alternate</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">hreflang</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">x-default</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">xDefaultUrl</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain-text"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">Head</span><span class="token tag punctuation" style="color:#393A34">&gt;</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="performance-improvements">Performance Improvements<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#performance-improvements" class="hash-link" aria-label="Direct link to Performance Improvements" title="Direct link to Performance Improvements" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="lazy-loading-gtm">Lazy-Loading GTM<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#lazy-loading-gtm" class="hash-link" aria-label="Direct link to Lazy-Loading GTM" title="Direct link to Lazy-Loading GTM" translate="no">​</a></h3>
<p>I replaced <code>@docusaurus/plugin-google-gtag</code> with a custom <code>src/clientModules/gtag.js</code> that dynamically injects the GTM script after the <code>window.load</code> event. This significantly reduced unused JS blocking initial render.</p>
<div class="language-js codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-js codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">loadGtag</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> script </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token dom variable" style="color:#36acaa">document</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">createElement</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'script'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  script</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">async</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  script</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">src</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">https://www.googletagmanager.com/gtag/js?id=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation constant" style="color:#36acaa">GA_ID</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token dom variable" style="color:#36acaa">document</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">head</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">appendChild</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">script</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token dom variable" style="color:#36acaa">window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">addEventListener</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'load'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> loadGtag</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">once</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<p>SPA page transitions use Docusaurus's <code>onRouteDidUpdate</code> hook to manually call <code>window.gtag</code>. A further improvement defers loading to <code>requestIdleCallback</code> for even better idle-time utilization.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="self-hosting--webp-avatar">Self-Hosting &amp; WebP Avatar<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#self-hosting--webp-avatar" class="hash-link" aria-label="Direct link to Self-Hosting &amp; WebP Avatar" title="Direct link to Self-Hosting &amp; WebP Avatar" translate="no">​</a></h3>
<p>Moved the avatar image from GitHub's CDN (<code>avatars.githubusercontent.com</code>) to self-hosted. GitHub CDN has a 5-minute cache TTL, which Lighthouse flagged on every run.</p>
<p>Converted the avatar to WebP format, reducing file size from 34 KB (PNG) to 3.5 KB — roughly a 90% reduction.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="image-size-optimization--cls-fix">Image Size Optimization &amp; CLS Fix<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#image-size-optimization--cls-fix" class="hash-link" aria-label="Direct link to Image Size Optimization &amp; CLS Fix" title="Direct link to Image Size Optimization &amp; CLS Fix" translate="no">​</a></h3>
<ul>
<li class="">Added <code>?size=64</code> to the GitHub avatar URL, shrinking from 460 px to 64 px (saving 33 KB)</li>
<li class="">Added <code>width</code>/<code>height</code> attributes to the navbar logo to fix CLS (Cumulative Layout Shift)</li>
<li class="">Added <code>loading="lazy"</code> to <code>&lt;img&gt;</code> tags</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="rspack--swc">rspack / SWC<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#rspack--swc" class="hash-link" aria-label="Direct link to rspack / SWC" title="Direct link to rspack / SWC" translate="no">​</a></h3>
<p>Introduced <code>@docusaurus/faster</code>, replacing webpack with rspack + SWC + lightningCSS:</p>
<div class="language-ts codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ts codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">future</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  v4</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  experimental_faster</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span></span><br></div></code></pre></div></div>
<p>This improved both build speed and bundle size.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="disabling-unused-plugins">Disabling Unused Plugins<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#disabling-unused-plugins" class="hash-link" aria-label="Direct link to Disabling Unused Plugins" title="Direct link to Disabling Unused Plugins" translate="no">​</a></h3>
<p>Disabled the unused docs plugin to prevent unnecessary JS from being shipped to clients.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="mobile-only-google-fonts">Mobile-Only Google Fonts<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#mobile-only-google-fonts" class="hash-link" aria-label="Direct link to Mobile-Only Google Fonts" title="Direct link to Mobile-Only Google Fonts" translate="no">​</a></h3>
<p>Google Fonts (Noto Sans JP) was only needed on mobile. Using <code>matchMedia</code>, the font stylesheet is now dynamically injected only on mobile devices, saving approximately 130 KB of unused CSS on desktop.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="accessibility-improvements">Accessibility Improvements<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#accessibility-improvements" class="hash-link" aria-label="Direct link to Accessibility Improvements" title="Direct link to Accessibility Improvements" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="fixing-contrast-ratios">Fixing Contrast Ratios<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#fixing-contrast-ratios" class="hash-link" aria-label="Direct link to Fixing Contrast Ratios" title="Direct link to Fixing Contrast Ratios" translate="no">​</a></h3>
<p>Changed the primary color from <code>#F15EB4</code> to <code>#C82273</code>, achieving a <strong>contrast ratio of 5.3:1</strong> against white (WCAG AA compliant). Dark mode uses <code>#F36AB2</code> (7.0:1 against the dark background).</p>
<p>Post date text color is now managed via the <code>--post-date-color</code> CSS variable: <code>#595959</code> (7.0:1) in light mode, <code>#9e9e9e</code> in dark mode.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="font-unification">Font Unification<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#font-unification" class="hash-link" aria-label="Direct link to Font Unification" title="Direct link to Font Unification" translate="no">​</a></h3>
<p>Changed heading and <code>&lt;strong&gt;</code> fonts from Noto Serif JP to Noto Sans JP for consistency with body text.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="results">Results<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#results" class="hash-link" aria-label="Direct link to Results" title="Direct link to Results" translate="no">​</a></h2>
<table><thead><tr><th>Category</th><th>Score</th></tr></thead><tbody><tr><td>Performance</td><td><strong>99</strong></td></tr><tr><td>Accessibility</td><td><strong>100</strong></td></tr><tr><td>Best Practices</td><td><strong>100</strong></td></tr><tr><td>SEO</td><td><strong>100</strong></td></tr></tbody></table>
<p>Near-perfect scores on mobile.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="summary">Summary<a href="https://www.hikari-dev.com/en/blog/2026/03/28/lighthouse-seo-performance#summary" class="hash-link" aria-label="Direct link to Summary" title="Direct link to Summary" translate="no">​</a></h2>
<p>The three most impactful changes were:</p>
<ol>
<li class=""><strong>Lazy-loading GTM</strong>: Dramatically reduced unused JS and boosted performance scores</li>
<li class=""><strong>OGP &amp; structured data</strong>: Achieved SEO 100 and improved social media sharing appearance</li>
<li class=""><strong>Contrast ratio fixes</strong>: WCAG AA compliance brought accessibility to 100</li>
</ol>
<p>Docusaurus generates high-quality sites by default, but achieving near-perfect Lighthouse scores requires fine-tuning GTM loading strategy, metadata, and accessibility details. I hope this helps others working on similar improvements.</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="Web" term="Web"/>
        <category label="SEO" term="SEO"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[How to Create Japanese PDFs with pLaTeX]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/03/28/platex</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/03/28/platex"/>
        <updated>2026-03-28T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[A guide to creating Japanese PDF documents with pLaTeX — from document structure and templates to compilation and common error fixes.]]></summary>
        <content type="html"><![CDATA[<p>A guide to creating Japanese PDF documents with pLaTeX — from document structure and templates to compilation and common error fixes.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="what-is-platex">What is pLaTeX?<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#what-is-platex" class="hash-link" aria-label="Direct link to What is pLaTeX?" title="Direct link to What is pLaTeX?" translate="no">​</a></h2>
<p>pLaTeX is a LaTeX implementation designed for Japanese typesetting. It compiles <code>.tex</code> files with the <code>platex</code> command and converts them to PDF using <code>dvipdfmx</code>.</p>
<p>It is included in TeX Live and ready to use once installed. For installation instructions, see <a class="" href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux">Installing TeX Live 2026 on Linux</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="choosing-a-document-class">Choosing a Document Class<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#choosing-a-document-class" class="hash-link" aria-label="Direct link to Choosing a Document Class" title="Direct link to Choosing a Document Class" translate="no">​</a></h2>
<p>Use the following classes for Japanese documents.</p>
<table><thead><tr><th>Class</th><th>Use case</th></tr></thead><tbody><tr><td><code>jarticle</code></td><td>Short documents such as papers and reports</td></tr><tr><td><code>jbook</code></td><td>Long documents with chapter structure</td></tr><tr><td><code>jreport</code></td><td>Technical reports (abstract + chapter structure)</td></tr><tr><td><code>beamer</code></td><td>Presentations</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="template-jarticle">Template (jarticle)<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#template-jarticle" class="hash-link" aria-label="Direct link to Template (jarticle)" title="Direct link to Template (jarticle)" translate="no">​</a></h2>
<p>A comprehensive sample using <code>jarticle</code> is shown below.</p>
<details class="details_rvcR alert alert--info details_Kt6x" data-collapsed="true"><summary>Show sample code</summary><div><div class="collapsibleContent_IDV4"><div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token comment" style="color:#999988;font-style:italic">% pLaTeX sample document — covers major features</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\documentclass</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">a4paper,12pt</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">jarticle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== Packages ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">amsmath, amssymb</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">      </span><span class="token comment" style="color:#999988;font-style:italic">% Enhanced math</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">graphicx</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% Include figures</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">color</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                 </span><span class="token comment" style="color:#999988;font-style:italic">% Color support</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">fancyhdr</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% Headers and footers</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">geometry</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% Page layout</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">enumerate</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">             </span><span class="token comment" style="color:#999988;font-style:italic">% Custom list labels</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">url</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                   </span><span class="token comment" style="color:#999988;font-style:italic">% URL formatting</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">multicol</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% Multi-column layout</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">booktabs</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% High-quality table rules</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">array</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                 </span><span class="token comment" style="color:#999988;font-style:italic">% Extended table column formats</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">verbatim</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% Verbatim environment</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">ascmac</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                </span><span class="token comment" style="color:#999988;font-style:italic">% Box environments (screen, itembox, etc.)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">okumacro</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% Ruby, kenten, etc. (pLaTeX standard)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">setspace</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% Line spacing control</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">listings</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">% Source code listings</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">xcolor</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">                </span><span class="token comment" style="color:#999988;font-style:italic">% Colors (for listings)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\usepackage</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">caption</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">               </span><span class="token comment" style="color:#999988;font-style:italic">% Caption formatting</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== Page Layout ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\geometry</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">top=25mm, bottom=25mm, left=25mm, right=25mm</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\setlength</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\headheight</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">17pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\addtolength</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\topmargin</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">-5pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== Headers and Footers ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\pagestyle</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">fancy</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\fancyhf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\lhead</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">pLaTeX Sample Document</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\rhead</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\today</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\cfoot</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\thepage</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\renewcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\headrulewidth</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">0.4pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== listings Settings ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\lstset</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  basicstyle=</span><span class="token function selector" style="color:#00009f">\ttfamily</span><span class="token function selector" style="color:#00009f">\small</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  keywordstyle=</span><span class="token function selector" style="color:#00009f">\color</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">blue</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\bfseries</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  commentstyle=</span><span class="token function selector" style="color:#00009f">\color</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">green!50!black</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  stringstyle=</span><span class="token function selector" style="color:#00009f">\color</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">red!70!black</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  numbers=left,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  numberstyle=</span><span class="token function selector" style="color:#00009f">\tiny</span><span class="token function selector" style="color:#00009f">\color</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">gray</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  frame=single,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  breaklines=true,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  tabsize=4,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ========== Title Information ==========</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\title</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\textbf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">pLaTeX Feature Showcase</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\\</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">5pt</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">       </span><span class="token function selector" style="color:#00009f">\large</span><span class="token plain"> --- Typical usage of Japanese </span><span class="token function selector" style="color:#00009f">\LaTeX</span><span class="token plain"> ---</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\author</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">John Doe</span><span class="token function selector" style="color:#00009f">\thanks</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Department of Computer Science, Sample University</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">        </span><span class="token function selector" style="color:#00009f">\and</span><span class="token plain"> Jane Doe</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\date</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\today</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">document</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\maketitle</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\thispagestyle</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">fancy</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">abstract</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">This document demonstrates the major features of pLaTeX.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">It covers document class and package loading, Japanese typesetting features,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">math environments, tables, figures, cross-references, footnotes,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ruby (furigana), kenten (emphasis dots), source code listings,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">multi-column layout, and custom commands.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">abstract</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\tableofcontents</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newpage</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Japanese Typesetting Basics</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Mixing Japanese and Latin Text</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">pLaTeX handles Japanese and Latin text naturally in the same document.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ASCII characters such as ``Hello, World!'' and </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">LaTeX2e</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">are automatically spaced appropriately.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Spacing between full-width and half-width characters is adjusted automatically:</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">JapaneseEnglishJapanese, numbers 123 Japanese, symbol \</span><span class="token comment" style="color:#999988;font-style:italic">% Japanese.</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Ruby (Furigana)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">The </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token plain">| command from the </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">okumacro</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> package adds ruby annotations.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">漢字</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">かんじ</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">、</span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">情報処理</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">じょうほうしょり</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">、</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">自然言語</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">しぜんげんご</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\ruby</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">処理</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">しょり</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Kenten (Emphasis Dots)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">The </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\kenten</span><span class="token plain">| command from </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">okumacro</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> adds emphasis dots above characters.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\kenten</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Important text</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> can be emphasized with kenten dots.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Font Sizes</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\tiny</span><span class="token plain"> tiny</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\scriptsize</span><span class="token plain"> scriptsize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\footnotesize</span><span class="token plain"> footnotesize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\small</span><span class="token plain"> small</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\normalsize</span><span class="token plain"> normalsize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\large</span><span class="token plain"> large</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\Large</span><span class="token plain"> Large</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\LARGE</span><span class="token plain"> LARGE</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\huge</span><span class="token plain"> huge</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\Huge</span><span class="token plain"> Huge</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Text Decoration</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textbf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Bold</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textit</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Italic</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textsl</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Slanted</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textsc</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Small Caps</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Typewriter (monospace)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\underline</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Underlined text</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textcolor</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">red</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Red text</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\textcolor</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">blue!70!black</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Blue text</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\colorbox</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">yellow</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Highlighted background</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Document Structure</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Heading Levels</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">jarticle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> supports the following heading levels:</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\section</span><span class="token plain">|, </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token plain">|, </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\subsubsection</span><span class="token plain">|,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\paragraph</span><span class="token plain">|, and </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\subparagraph</span><span class="token plain">|.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsubsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Subsubsection Example</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">This is a subsubsection.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\paragraph</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Paragraph Heading</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">This is an example of a paragraph heading. Body text follows without indentation.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Footnotes</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Footnotes</span><span class="token function selector" style="color:#00009f">\footnote</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">This is the footnote text. It is placed automatically at the bottom of the page.</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">can be added inline. Multiple footnotes</span><span class="token function selector" style="color:#00009f">\footnote</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">A second footnote. Numbers are assigned automatically.</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">are supported.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Cross-references</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Adding </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\label</span><span class="token plain">| allows referencing with </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token plain">| and </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\pageref</span><span class="token plain">|.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Example: the next section is Section~</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">sec:math</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> (page~</span><span class="token function selector" style="color:#00009f">\pageref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">sec:math</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">).</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Math Environments</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\label</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">sec:math</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Inline and Display Math</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Inline math: </span><span class="token equation string" style="color:#e3116c">$E = mc^2$</span><span class="token plain">, </span><span class="token equation string" style="color:#e3116c">$</span><span class="token equation string equation-command regex" style="color:#36acaa">\alpha</span><span class="token equation string" style="color:#e3116c"> + </span><span class="token equation string equation-command regex" style="color:#36acaa">\beta</span><span class="token equation string" style="color:#e3116c"> = </span><span class="token equation string equation-command regex" style="color:#36acaa">\gamma</span><span class="token equation string" style="color:#e3116c">$</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token equation string" style="color:#e3116c">$</span><span class="token equation string equation-command regex" style="color:#36acaa">\sum</span><span class="token equation string" style="color:#e3116c">_{i=1}^{n} i = </span><span class="token equation string equation-command regex" style="color:#36acaa">\frac</span><span class="token equation string" style="color:#e3116c">{n(n+1)}{2}$</span><span class="token plain">.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Display math:</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token equation string" style="color:#e3116c">\[</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\int</span><span class="token equation string" style="color:#e3116c">_{-</span><span class="token equation string equation-command regex" style="color:#36acaa">\infty</span><span class="token equation string" style="color:#e3116c">}^{</span><span class="token equation string equation-command regex" style="color:#36acaa">\infty</span><span class="token equation string" style="color:#e3116c">} e^{-x^2}</span><span class="token equation string equation-command regex" style="color:#36acaa">\,</span><span class="token equation string" style="color:#e3116c">dx = </span><span class="token equation string equation-command regex" style="color:#36acaa">\sqrt</span><span class="token equation string" style="color:#e3116c">{</span><span class="token equation string equation-command regex" style="color:#36acaa">\pi</span><span class="token equation string" style="color:#e3116c">}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">\]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">equation and align Environments</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Numbered equation (</span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">):</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\label</span><span class="token equation string" style="color:#e3116c">{eq:euler}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  e^{i</span><span class="token equation string equation-command regex" style="color:#36acaa">\pi</span><span class="token equation string" style="color:#e3116c">} + 1 = 0</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Equation~</span><span class="token function selector" style="color:#00009f">\eqref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">eq:euler</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> is Euler's identity.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Multi-line alignment (</span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">align</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">):</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">align</span><span class="token punctuation" style="color:#393A34">}</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  (a+b)^2 &amp;= a^2 + 2ab + b^2 </span><span class="token equation string equation-command regex" style="color:#36acaa">\\</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  (a-b)^2 &amp;= a^2 - 2ab + b^2 </span><span class="token equation string equation-command regex" style="color:#36acaa">\\</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  (a+b)(a-b) &amp;= a^2 - b^2</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">align</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Matrices and Vectors</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  A = </span><span class="token equation string equation-command regex" style="color:#36acaa">\begin</span><span class="token equation string" style="color:#e3116c">{pmatrix} a_{11} &amp; a_{12} </span><span class="token equation string equation-command regex" style="color:#36acaa">\\</span><span class="token equation string" style="color:#e3116c"> a_{21} &amp; a_{22} </span><span class="token equation string equation-command regex" style="color:#36acaa">\end</span><span class="token equation string" style="color:#e3116c">{pmatrix},</span><span class="token equation string equation-command regex" style="color:#36acaa">\quad</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\det</span><span class="token equation string" style="color:#e3116c">(A) = a_{11}a_{22} - a_{12}a_{21}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Cases, Fractions, and Limits</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  f(x) = </span><span class="token equation string equation-command regex" style="color:#36acaa">\begin</span><span class="token equation string" style="color:#e3116c">{cases}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">    x^2       &amp; (x </span><span class="token equation string equation-command regex" style="color:#36acaa">\geq</span><span class="token equation string" style="color:#e3116c"> 0) </span><span class="token equation string equation-command regex" style="color:#36acaa">\\</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">    -x^2      &amp; (x &lt; 0)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\end</span><span class="token equation string" style="color:#e3116c">{cases}, </span><span class="token equation string equation-command regex" style="color:#36acaa">\qquad</span><span class="token equation string" style="color:#e3116c"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c">  </span><span class="token equation string equation-command regex" style="color:#36acaa">\lim</span><span class="token equation string" style="color:#e3116c">_{n</span><span class="token equation string equation-command regex" style="color:#36acaa">\to</span><span class="token equation string equation-command regex" style="color:#36acaa">\infty</span><span class="token equation string" style="color:#e3116c">} </span><span class="token equation string equation-command regex" style="color:#36acaa">\left</span><span class="token equation string" style="color:#e3116c">(1 + </span><span class="token equation string equation-command regex" style="color:#36acaa">\frac</span><span class="token equation string" style="color:#e3116c">{1}{n}</span><span class="token equation string equation-command regex" style="color:#36acaa">\right</span><span class="token equation string" style="color:#e3116c">)^n = e</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token equation string" style="color:#e3116c"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">equation</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Tables (tabular Environment)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Basic Table</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">table</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">h</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\centering</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\caption</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Temperature Data by City (sample)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\label</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tab:temp</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">lrrr</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\toprule</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    City    </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> High (°C) </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Low (°C) </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Avg (°C) </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\midrule</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Tokyo   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 35.2 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 25.1 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 29.8 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Osaka   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 36.4 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 26.3 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 31.0 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Sapporo </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 28.7 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 19.5 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 23.9 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Naha    </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 32.1 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 27.4 </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> 29.8 </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\bottomrule</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">table</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Complex Table (\texttt{array</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> Extension)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">table</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">h</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\centering</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\caption</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Programming Language Comparison</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\label</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tab:lang</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">|l|c|c|c|</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\hline</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Language   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Typing   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Paradigm     </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Main Use </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\hline</span><span class="token function selector" style="color:#00009f">\hline</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Python     </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Dynamic  </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Multi        </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> AI/Data Science </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Rust       </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Static   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Systems      </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Systems Programming </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    Haskell    </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Static   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Functional   </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Research/Finance </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    JavaScript </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Dynamic  </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Multi        </span><span class="token punctuation" style="color:#393A34">&amp;</span><span class="token plain"> Web Frontend </span><span class="token function selector" style="color:#00009f">\\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\hline</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">table</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Tables~</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tab:temp</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> and~</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tab:lang</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> can be referenced using </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\label</span><span class="token plain">/</span><span class="token function selector" style="color:#00009f">\ref</span><span class="token plain">|.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">List Environments</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Bullet List (itemize)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> First item</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> Second item</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> Nested item A</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> Nested item B</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> Third item</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Numbered List (enumerate)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">enumerate</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">(1)</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain">   </span><span class="token comment" style="color:#999988;font-style:italic">% Custom label format via enumerate package</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> First step</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> Next step</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> Final step</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">enumerate</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Description List (description)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">description</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">pLaTeX</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> Japanese-capable </span><span class="token function selector" style="color:#00009f">\LaTeX</span><span class="token plain"> engine</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">upLaTeX</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> Unicode-aware successor to pLaTeX</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\item</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">LuaLaTeX</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\LaTeX</span><span class="token plain"> engine with Lua scripting support</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">description</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Verbatim and Source Code</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">verbatim Environment</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">verbatim</span><span class="token punctuation" style="color:#393A34">}</span><span class="token cdata" style="color:#999988;font-style:italic"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">#include &lt;stdio.h&gt;</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">int main(void) {</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    printf("Hello, pLaTeX!\n");</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    return 0;</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">verbatim</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Syntax Highlighting with listings</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">lstlisting</span><span class="token punctuation" style="color:#393A34">}</span><span class="token cdata" style="color:#999988;font-style:italic">[language=Python, caption={Fibonacci sequence (Python)}]</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">def fibonacci(n: int) -&gt; int:</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    """Compute Fibonacci number recursively."""</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    if n &lt;= 1:</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">        return n</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    return fibonacci(n - 1) + fibonacci(n - 2)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic"># Print the first 10 terms</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">for i in range(10):</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic">    print(f"F({i}) = {fibonacci(i)}")</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token cdata" style="color:#999988;font-style:italic"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">lstlisting</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Box Environments</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">The </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">ascmac</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> package provides </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">itembox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">, </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">screen</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">, and similar environments.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itembox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">l</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Key Points</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> Use </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">jarticle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> / </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">jbook</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> document classes for Japanese</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">okumacro</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> provides ruby and kenten</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function selector" style="color:#00009f">\item</span><span class="token plain"> Generate PDFs with </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">platex + dvipdfmx</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itemize</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">itembox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">5pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">screen</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">screen</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> environment: a terminal-style box, useful for showing command output or code examples.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">screen</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Multi-Column Layout</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">The </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">multicol</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> package enables mid-document column switching.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">multicols</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">2</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\noindent</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  This is the left column of a two-column layout.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  pLaTeX handles Japanese text in multi-column layouts naturally.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  Long text is distributed evenly across columns automatically,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  making it suitable for newspaper or magazine-style typesetting.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\columnbreak</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\noindent</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  This is the right column.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  Use </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\columnbreak</span><span class="token plain">| to force a column break.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  Inline math such as </span><span class="token equation string" style="color:#e3116c">$x = </span><span class="token equation string equation-command regex" style="color:#36acaa">\frac</span><span class="token equation string" style="color:#e3116c">{-b </span><span class="token equation string equation-command regex" style="color:#36acaa">\pm</span><span class="token equation string" style="color:#e3116c"> </span><span class="token equation string equation-command regex" style="color:#36acaa">\sqrt</span><span class="token equation string" style="color:#e3116c">{b^2 - 4ac}}{2a}$</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  works as expected.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">multicols</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Spacing Adjustments</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Horizontal Space</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Word spacing: a</span><span class="token function selector" style="color:#00009f">\,</span><span class="token plain">b (</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\,</span><span class="token plain">| thin space),</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">a</span><span class="token function selector" style="color:#00009f">\enspace</span><span class="token plain"> b (</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\enspace</span><span class="token plain">|),</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">a</span><span class="token function selector" style="color:#00009f">\quad</span><span class="token plain"> b (</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\quad</span><span class="token plain">|),</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">a</span><span class="token function selector" style="color:#00009f">\qquad</span><span class="token plain"> b (</span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\qquad</span><span class="token plain">|).</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Vertical Space</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Use </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token plain">| to insert vertical space.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">5mm</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Text after a 5mm vertical space.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">5mm</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Line Spacing</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\setstretch</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">1.8</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">This paragraph uses </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">setstretch</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> from the </span><span class="token function selector" style="color:#00009f">\texttt</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">setspace</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> package</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">to set line spacing to 1.8x.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">A spacing of 1.5 to 2.0 is generally considered readable for Japanese text.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Custom Commands and Environments</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Defining Custom Commands</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\R</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\mathbb</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">R</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\N</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\mathbb</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">N</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\highlight</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">1</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\colorbox</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">yellow!60</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">#1</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newcommand</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\term</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">1</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\textbf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\textit</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">#1</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">% Term emphasis</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Examples: </span><span class="token equation string" style="color:#e3116c">$</span><span class="token equation string equation-command regex" style="color:#36acaa">\R</span><span class="token equation string" style="color:#e3116c">$</span><span class="token plain"> (real numbers), </span><span class="token equation string" style="color:#e3116c">$</span><span class="token equation string equation-command regex" style="color:#36acaa">\N</span><span class="token equation string" style="color:#e3116c">$</span><span class="token plain"> (natural numbers).</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\highlight</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Highlighted text</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\term</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Machine learning</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> is a subfield of artificial intelligence.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\subsection</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">Defining Custom Environments</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\newenvironment</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">mybox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">1</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">%</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">|p</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">0.85</span><span class="token function selector" style="color:#00009f">\linewidth</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">|</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\hline</span><span class="token function selector" style="color:#00009f">\vspace</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">1pt</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\textbf</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">#1</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\\</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">2pt</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token comment" style="color:#999988;font-style:italic">%</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\\</span><span class="token function selector" style="color:#00009f">\hline</span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">tabular</span><span class="token punctuation" style="color:#393A34">}</span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">center</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">mybox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">Custom Box</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  Use </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\newenvironment</span><span class="token plain">| to define reusable environments.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  They can accept arguments for flexible customization.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">mybox</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\section</span><span class="token punctuation" style="color:#393A34">{</span><span class="token headline class-name">References</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Cite references with the </span><span class="token function selector" style="color:#00009f">\verb</span><span class="token plain">|</span><span class="token function selector" style="color:#00009f">\cite</span><span class="token plain">| command~</span><span class="token function selector" style="color:#00009f">\cite</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">knuth1984,lamport1994,okumura2020</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">The reference list is output at the end of the document.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% Reference list (thebibliography environment)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">%% ================================================================</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\begin</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">thebibliography</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">99</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\bibitem</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">knuth1984</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  D.~E. Knuth,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\textit</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">The </span><span class="token function selector" style="color:#00009f">\TeX</span><span class="token plain"> book</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  Addison-Wesley, 1984.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\bibitem</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">lamport1994</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  L.~Lamport,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\textit</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\LaTeX</span><span class="token plain">: A Document Preparation System</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">, 2nd ed.,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  Addison-Wesley, 1994.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\bibitem</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">okumura2020</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  H.~Okumura and Y.~Kuroki,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token function selector" style="color:#00009f">\textit</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function selector" style="color:#00009f">\LaTeXe</span><span class="token plain"> Beautiful Document Creation Guide</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain">, 8th ed.,</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  Gijutsu-Hyoronsha, 2020.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">thebibliography</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function selector" style="color:#00009f">\end</span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">document</span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div></div></div></details>
<iframe src="/img/blog/2026-03-28-platex/sample.pdf" width="100%" height="600px" style="border:none"></iframe>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="compilation">Compilation<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#compilation" class="hash-link" aria-label="Direct link to Compilation" title="Direct link to Compilation" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="basic-platex--dvipdfmx">Basic (platex + dvipdfmx)<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#basic-platex--dvipdfmx" class="hash-link" aria-label="Direct link to Basic (platex + dvipdfmx)" title="Direct link to Basic (platex + dvipdfmx)" translate="no">​</a></h3>
<p>Run <code>platex</code> twice to resolve cross-references and table of contents, then convert to PDF with <code>dvipdfmx</code>.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">platex </span><span class="token parameter variable" style="color:#36acaa">-interaction</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">nonstopmode </span><span class="token parameter variable" style="color:#36acaa">-kanji</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">utf8 document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">platex </span><span class="token parameter variable" style="color:#36acaa">-interaction</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">nonstopmode </span><span class="token parameter variable" style="color:#36acaa">-kanji</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">utf8 document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">dvipdfmx document.dvi</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="ptex2pdf">ptex2pdf<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#ptex2pdf" class="hash-link" aria-label="Direct link to ptex2pdf" title="Direct link to ptex2pdf" translate="no">​</a></h3>
<p><code>ptex2pdf</code> combines the <code>platex</code> + <code>dvipdfmx</code> two-step process into a single command.</p>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="basic-command">Basic Command<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#basic-command" class="hash-link" aria-label="Direct link to Basic Command" title="Direct link to Basic Command" translate="no">​</a></h4>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div></code></pre></div></div>
<table><thead><tr><th>Option</th><th>Meaning</th></tr></thead><tbody><tr><td><code>-l</code></td><td>Use latex-based engine (platex)</td></tr><tr><td><code>-ot "..."</code></td><td>Options passed to platex</td></tr><tr><td><code>-kanji=utf8</code></td><td>Set input encoding to UTF-8</td></tr><tr><td><code>-interaction=nonstopmode</code></td><td>Continue processing without stopping on errors</td></tr></tbody></table>
<h4 class="anchor anchorTargetStickyNavbar_DVDF" id="steps">Steps<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#steps" class="hash-link" aria-label="Direct link to Steps" title="Direct link to Steps" translate="no">​</a></h4>
<ol>
<li class="">
<p><strong>Run ptex2pdf twice</strong> (to resolve cross-references and table of contents)</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div></code></pre></div></div>
</li>
<li class="">
<p><strong>Check the result</strong></p>
<ul>
<li class="">Success: <code>document.pdf</code> is generated</li>
<li class="">Error: Check lines starting with <code>!</code> in the <code>.log</code> file and the 3 surrounding lines</li>
<li class="">Warnings only: Check for Overfull/Underfull hbox, undefined references, etc.</li>
</ul>
</li>
<li class="">
<p><strong>When BibTeX is needed</strong> (when a <code>.bib</code> file exists or <code>\bibliography</code> is used)</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">bibtex document</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">ptex2pdf </span><span class="token parameter variable" style="color:#36acaa">-l</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-ot</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"-kanji=utf8 -interaction=nonstopmode"</span><span class="token plain"> document.tex</span></span><br></div></code></pre></div></div>
<p>Running <code>ptex2pdf</code> twice after <code>bibtex</code> resolves the cross-references between the reference list and in-text citations.</p>
</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="common-errors-and-fixes">Common Errors and Fixes<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#common-errors-and-fixes" class="hash-link" aria-label="Direct link to Common Errors and Fixes" title="Direct link to Common Errors and Fixes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="undefined-control-sequence">Undefined control sequence<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#undefined-control-sequence" class="hash-link" aria-label="Direct link to Undefined control sequence" title="Direct link to Undefined control sequence" translate="no">​</a></h3>
<div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">! Undefined control sequence.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">l.42 </span><span class="token function selector" style="color:#00009f">\somecommand</span></span><br></div></code></pre></div></div>
<p>An undefined command is used. The cause is usually a missing package or a typo.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="missing--inserted">Missing $ inserted<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#missing--inserted" class="hash-link" aria-label="Direct link to Missing $ inserted" title="Direct link to Missing $ inserted" translate="no">​</a></h3>
<div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">! Missing $ inserted.</span></span><br></div></code></pre></div></div>
<p>A math symbol such as <code>_</code> (subscript) or <code>^</code> (superscript) is used outside math mode. Wrap the expression with <code>$...$</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="file-not-found">File not found<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#file-not-found" class="hash-link" aria-label="Direct link to File not found" title="Direct link to File not found" translate="no">​</a></h3>
<div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">! LaTeX Error: File `image.png' not found.</span></span><br></div></code></pre></div></div>
<p>The path specified in <code>\includegraphics</code> is incorrect. Verify the path relative to the <code>.tex</code> file.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="overfull-hbox">Overfull \hbox<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#overfull-hbox" class="hash-link" aria-label="Direct link to Overfull \hbox" title="Direct link to Overfull \hbox" translate="no">​</a></h3>
<div class="language-latex codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-latex codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Overfull </span><span class="token function selector" style="color:#00009f">\hbox</span><span class="token plain"> (12.3pt too wide) in paragraph at lines 55--60</span></span><br></div></code></pre></div></div>
<p>This is a warning, not an error. A line does not fit within the specified width. Long URLs or words are often the cause; use <code>\allowbreak</code> or the <code>\url{}</code> package to fix it.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="checking-the-log">Checking the Log<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#checking-the-log" class="hash-link" aria-label="Direct link to Checking the Log" title="Direct link to Checking the Log" translate="no">​</a></h2>
<p>The <code>.log</code> file generated after compilation contains detailed error and warning information. Lines starting with <code>!</code> are errors; lines containing <code>Warning</code> are warnings.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">grep</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-n</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^!"</span><span class="token plain"> document.log        </span><span class="token comment" style="color:#999988;font-style:italic"># Extract error lines</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">grep</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-n</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Warning"</span><span class="token plain"> document.log   </span><span class="token comment" style="color:#999988;font-style:italic"># Extract warning lines</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="cleaning-up-intermediate-files">Cleaning Up Intermediate Files<a href="https://www.hikari-dev.com/en/blog/2026/03/28/platex#cleaning-up-intermediate-files" class="hash-link" aria-label="Direct link to Cleaning Up Intermediate Files" title="Direct link to Cleaning Up Intermediate Files" translate="no">​</a></h2>
<p>Compilation generates many intermediate files. To clean up while keeping the PDF:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">rm</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-f</span><span class="token plain"> document.aux document.log document.dvi </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      document.toc document.lof document.lot </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      document.out document.bbl document.blg </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">      document.synctex.gz</span></span><br></div></code></pre></div></div>
<p>To remove everything including the PDF, add <code>.pdf</code> to the list.</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="LaTeX" term="LaTeX"/>
        <category label="TeX" term="TeX"/>
        <category label="Linux" term="Linux"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Installing TeX Live 2026 on Linux]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux"/>
        <updated>2026-03-27T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[A step-by-step guide to installing TeX Live 2026 on RHEL-based Linux using an ISO image. These steps apply to RHEL-based distributions in general.]]></summary>
        <content type="html"><![CDATA[<p>A step-by-step guide to installing TeX Live 2026 on RHEL-based Linux using an ISO image. These steps apply to RHEL-based distributions in general.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="prerequisites">Prerequisites<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites" translate="no">​</a></h2>
<ul>
<li class=""><code>sudo</code> privileges</li>
<li class="">At least 10 GB of free disk space (ISO ~6.4 GB + installation ~8 GB)</li>
<li class="">Internet connection</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-1-download-the-iso-image">Step 1: Download the ISO Image<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#step-1-download-the-iso-image" class="hash-link" aria-label="Direct link to Step 1: Download the ISO Image" title="Direct link to Step 1: Download the ISO Image" translate="no">​</a></h2>
<p>Download the ISO from the RIKEN mirror site.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">cd</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">curl</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-C</span><span class="token plain"> - </span><span class="token parameter variable" style="color:#36acaa">-O</span><span class="token plain"> --progress-bar https://ftp.riken.jp/CTAN/systems/texlive/Images/texlive2026.iso</span></span><br></div></code></pre></div></div>
<p>The <code>-C -</code> option resumes the download if it is interrupted.</p>
<p>After the download completes, verify the file size (~6.4 GiB):</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-lh</span><span class="token plain"> ~/texlive2026.iso</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-2-mount-the-iso-image">Step 2: Mount the ISO Image<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#step-2-mount-the-iso-image" class="hash-link" aria-label="Direct link to Step 2: Mount the ISO Image" title="Direct link to Step 2: Mount the ISO Image" translate="no">​</a></h2>
<p>Create a mount point and mount the ISO as a loop device.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-p</span><span class="token plain"> /mnt/texlive</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">mount</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-o</span><span class="token plain"> loop,ro ~/texlive2026.iso /mnt/texlive</span></span><br></div></code></pre></div></div>
<p>Verify the mount:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">ls</span><span class="token plain"> /mnt/texlive</span></span><br></div></code></pre></div></div>
<p>You should see output like the following:</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">install-tl  archive  tlpkg  README  ...</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-3-run-the-installer">Step 3: Run the Installer<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#step-3-run-the-installer" class="hash-link" aria-label="Direct link to Step 3: Run the Installer" title="Direct link to Step 3: Run the Installer" translate="no">​</a></h2>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> /mnt/texlive/install-tl</span></span><br></div></code></pre></div></div>
<p>A text-based interactive menu will launch.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="key-controls">Key Controls<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#key-controls" class="hash-link" aria-label="Direct link to Key Controls" title="Direct link to Key Controls" translate="no">​</a></h3>
<table><thead><tr><th>Key</th><th>Action</th></tr></thead><tbody><tr><td><code>S</code></td><td>Select installation scheme</td></tr><tr><td><code>D</code></td><td>Change installation directory</td></tr><tr><td><code>I</code></td><td>Start installation</td></tr><tr><td><code>Q</code></td><td>Quit (cancel)</td></tr></tbody></table>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="recommended-settings">Recommended Settings<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#recommended-settings" class="hash-link" aria-label="Direct link to Recommended Settings" title="Direct link to Recommended Settings" translate="no">​</a></h3>
<ul>
<li class=""><strong>Scheme</strong>: <code>scheme-full</code> (includes all packages; contains <code>collection-langjapanese</code> required for Japanese LaTeX)</li>
<li class=""><strong>Installation directory</strong>: <code>/usr/local/texlive/2026</code> (default)</li>
</ul>
<p>After confirming the settings, press <code>I</code> to start the installation. The process takes several tens of minutes.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-4-configure-path">Step 4: Configure PATH<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#step-4-configure-path" class="hash-link" aria-label="Direct link to Step 4: Configure PATH" title="Direct link to Step 4: Configure PATH" translate="no">​</a></h2>
<p>Add the TeX Live binary path to <code>~/.bashrc</code>.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">echo</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'export PATH="/usr/local/texlive/2026/bin/x86_64-linux:$PATH"'</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&gt;&gt;</span><span class="token plain"> ~/.bashrc</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token builtin class-name">source</span><span class="token plain"> ~/.bashrc</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-5-fix-locale-rhel-based-systems">Step 5: Fix Locale (RHEL-based Systems)<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#step-5-fix-locale-rhel-based-systems" class="hash-link" aria-label="Direct link to Step 5: Fix Locale (RHEL-based Systems)" title="Direct link to Step 5: Fix Locale (RHEL-based Systems)" translate="no">​</a></h2>
<p>On RHEL-based Linux, <code>lualatex</code> may fail with an error if the locale is not configured. Run the following:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> dnf </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-y</span><span class="token plain"> glibc-langpack-en</span></span><br></div></code></pre></div></div>
<p>Also set the locale on shell startup:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">echo</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'export LANG=C.UTF-8'</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&gt;&gt;</span><span class="token plain"> ~/.bashrc</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token builtin class-name">source</span><span class="token plain"> ~/.bashrc</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-6-verify-installation">Step 6: Verify Installation<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#step-6-verify-installation" class="hash-link" aria-label="Direct link to Step 6: Verify Installation" title="Direct link to Step 6: Verify Installation" translate="no">​</a></h2>
<p>Check the version of each command:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">tex </span><span class="token parameter variable" style="color:#36acaa">--version</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">lualatex </span><span class="token parameter variable" style="color:#36acaa">--version</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">platex </span><span class="token parameter variable" style="color:#36acaa">--version</span></span><br></div></code></pre></div></div>
<p>Expected output:</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">TeX 3.141592653 (TeX Live 2026)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">LuaHBTeX, Version 1.24.0 (TeX Live 2026)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">e-upTeX 3.141592653-p4.1.2-u2.02 (TeX Live 2026)</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-7-test-japanese-compilation">Step 7: Test Japanese Compilation<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#step-7-test-japanese-compilation" class="hash-link" aria-label="Direct link to Step 7: Test Japanese Compilation" title="Direct link to Step 7: Test Japanese Compilation" translate="no">​</a></h2>
<p>Create a test file:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">cat</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> /tmp/test.tex </span><span class="token operator" style="color:#393A34">&lt;&lt;</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'EOF'</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">\documentclass{jlreq}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">\begin{document}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">日本語のテスト。TeX Live 2026 による日本語組版のサンプルです。</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">\end{document}</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token string" style="color:#e3116c">EOF</span></span><br></div></code></pre></div></div>
<p>Compile it:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token builtin class-name">cd</span><span class="token plain"> /tmp </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> lualatex test.tex</span></span><br></div></code></pre></div></div>
<p>If <code>test.pdf</code> is generated, the installation is successful.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="step-8-cleanup-optional">Step 8: Cleanup (Optional)<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#step-8-cleanup-optional" class="hash-link" aria-label="Direct link to Step 8: Cleanup (Optional)" title="Direct link to Step 8: Cleanup (Optional)" translate="no">​</a></h2>
<p>After installation, you can remove the ISO and mount point:</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sudo</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">umount</span><span class="token plain"> /mnt/texlive</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">rm</span><span class="token plain"> ~/texlive2026.iso</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="mirror-sites">Mirror Sites<a href="https://www.hikari-dev.com/en/blog/2026/03/27/install-texlive-2026-rocky-linux#mirror-sites" class="hash-link" aria-label="Direct link to Mirror Sites" title="Direct link to Mirror Sites" translate="no">​</a></h2>
<p>If the download is slow, try another mirror:</p>
<table><thead><tr><th>Mirror</th><th>URL</th></tr></thead><tbody><tr><td>RIKEN (recommended)</td><td><a href="https://ftp.riken.jp/CTAN/systems/texlive/Images/" target="_blank" rel="noopener noreferrer" class="">https://ftp.riken.jp/CTAN/systems/texlive/Images/</a></td></tr><tr><td>JAIST</td><td><a href="https://ftp.jaist.ac.jp/pub/CTAN/systems/texlive/Images/" target="_blank" rel="noopener noreferrer" class="">https://ftp.jaist.ac.jp/pub/CTAN/systems/texlive/Images/</a></td></tr><tr><td>Yamagata University</td><td><a href="https://ftp.yz.yamagata-u.ac.jp/pub/CTAN/systems/texlive/Images/" target="_blank" rel="noopener noreferrer" class="">https://ftp.yz.yamagata-u.ac.jp/pub/CTAN/systems/texlive/Images/</a></td></tr><tr><td>CTAN mirror</td><td><a href="https://mirror.ctan.org/systems/texlive/Images/" target="_blank" rel="noopener noreferrer" class="">https://mirror.ctan.org/systems/texlive/Images/</a></td></tr></tbody></table>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="Linux" term="Linux"/>
        <category label="TeX" term="TeX"/>
        <category label="LaTeX" term="LaTeX"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[What Are AI Agent Skills? How They Work, Explained Simply]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills"/>
        <updated>2026-03-26T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Adding "skills" to an AI agent lets you extend its capabilities, just like installing a plugin for an app. This article explains how Agent Skills work and what an agent actually does internally when using them.]]></summary>
        <content type="html"><![CDATA[<p>Adding "skills" to an AI agent lets you extend its capabilities, just like installing a plugin for an app. This article explains how Agent Skills work and what an agent actually does internally when using them.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="what-is-an-ai-agent">What Is an AI Agent?<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#what-is-an-ai-agent" class="hash-link" aria-label="Direct link to What Is an AI Agent?" title="Direct link to What Is an AI Agent?" translate="no">​</a></h2>
<p>First, an AI agent is an <strong>AI program that receives instructions and autonomously completes tasks</strong>.</p>
<p>Unlike a simple AI that just answers questions (like ChatGPT in basic use), an agent can:</p>
<ul>
<li class="">Read and write files</li>
<li class="">Execute code and check results</li>
<li class="">Call external APIs and tools</li>
<li class="">Make decisions across multiple steps on its own</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="what-are-skills">What Are Skills?<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#what-are-skills" class="hash-link" aria-label="Direct link to What Are Skills?" title="Direct link to What Are Skills?" translate="no">​</a></h2>
<p><a href="https://agentskills.io/home" target="_blank" rel="noopener noreferrer" class="">Agent Skills</a> is a mechanism for <strong>giving agents new abilities and domain knowledge</strong>.</p>
<p>Think of it like handing a new employee a work manual. Once the agent reads the manual (the skill), it understands how to approach that task correctly.</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Without skills: "Write a blog post" → Agent writes something generic</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">With skills:    "Write a blog post" → Agent follows the manual and produces consistent, quality output</span></span><br></div></code></pre></div></div>
<p>Skills are primarily written as Markdown files (<code>SKILL.md</code>) and can include:</p>
<ul>
<li class=""><strong>Step-by-step procedures</strong>: What to do and in what order</li>
<li class=""><strong>Scripts</strong>: Automatable processes</li>
<li class=""><strong>Samples and config</strong>: Resources for the agent to reference</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="why-are-skills-needed">Why Are Skills Needed?<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#why-are-skills-needed" class="hash-link" aria-label="Direct link to Why Are Skills Needed?" title="Direct link to Why Are Skills Needed?" translate="no">​</a></h2>
<p>AI agents are extremely capable, but they <strong>don't know anything specific about your project</strong>.</p>
<p>For example:</p>
<ul>
<li class="">"How does this team write commit messages?"</li>
<li class="">"What frontmatter format does this blog use?"</li>
<li class="">"Which commands are used for deployment?"</li>
</ul>
<p>Without skills, agents can't know any of this. Skills let agents understand "the right way to do things" before acting.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="how-an-agent-processes-a-skill">How an Agent Processes a Skill<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#how-an-agent-processes-a-skill" class="hash-link" aria-label="Direct link to How an Agent Processes a Skill" title="Direct link to How an Agent Processes a Skill" translate="no">​</a></h2>
<p>Let's look at what's happening inside the agent.</p>
<!-- -->
<p>Here are the key points:</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="1-loading-the-skill">1. Loading the Skill<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#1-loading-the-skill" class="hash-link" aria-label="Direct link to 1. Loading the Skill" title="Direct link to 1. Loading the Skill" translate="no">​</a></h3>
<p>The agent reads the skill at the start. The skill content is passed as part of the LLM's input (prompt). The LLM reads this and understands "the right approach for this task."</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="2-breaking-down-the-task">2. Breaking Down the Task<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#2-breaking-down-the-task" class="hash-link" aria-label="Direct link to 2. Breaking Down the Task" title="Direct link to 2. Breaking Down the Task" translate="no">​</a></h3>
<p>Based on the instructions, the LLM breaks the task into smaller steps: "Read 3 existing posts first," "then decide on a filename," "then write the frontmatter," and so on.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="3-calling-tools">3. Calling Tools<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#3-calling-tools" class="hash-link" aria-label="Direct link to 3. Calling Tools" title="Direct link to 3. Calling Tools" translate="no">​</a></h3>
<p>At each step, the agent calls tools as needed — reading files, searching the web, executing code — following the procedure defined by the skill.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="4-feeding-back-results">4. Feeding Back Results<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#4-feeding-back-results" class="hash-link" aria-label="Direct link to 4. Feeding Back Results" title="Direct link to 4. Feeding Back Results" translate="no">​</a></h3>
<p>Tool results are passed back to the LLM. The LLM looks at the results and decides what to do next, looping until the task is complete.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="skill-commands">Skill Commands<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#skill-commands" class="hash-link" aria-label="Direct link to Skill Commands" title="Direct link to Skill Commands" translate="no">​</a></h2>
<p>Skills can be invoked as slash commands (<code>/command-name</code>).</p>
<p>When a command is called, the corresponding Markdown file's content is expanded as a prompt, and the agent begins executing those steps.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="skills-are-growing">Skills Are Growing<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#skills-are-growing" class="hash-link" aria-label="Direct link to Skills Are Growing" title="Direct link to Skills Are Growing" translate="no">​</a></h2>
<p>The Agent Skills format was <a href="https://agentskills.io/home" target="_blank" rel="noopener noreferrer" class="">developed and open-sourced by Anthropic</a> and is now supported by many tools:</p>
<table><thead><tr><th>Tool</th><th>Supported</th></tr></thead><tbody><tr><td>Claude Code</td><td>✅</td></tr><tr><td>GitHub Copilot</td><td>✅</td></tr><tr><td>Cursor</td><td>✅</td></tr><tr><td>Gemini CLI</td><td>✅</td></tr><tr><td>OpenAI Codex</td><td>✅</td></tr><tr><td>VS Code</td><td>✅</td></tr></tbody></table>
<p>The biggest advantage is that the same skill can be reused across different tools.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="summary">Summary<a href="https://www.hikari-dev.com/en/blog/2026/03/26/agent-skills#summary" class="hash-link" aria-label="Direct link to Summary" title="Direct link to Summary" translate="no">​</a></h2>
<ul>
<li class=""><strong>Skills</strong> are a mechanism for giving agents specialized knowledge and procedures</li>
<li class="">You can create one by writing steps and rules in a Markdown file (<code>SKILL.md</code>)</li>
<li class="">The agent receives the skill as a prompt; the LLM interprets it and executes each step</li>
<li class="">It's an open standard supported by Claude Code, Cursor, GitHub Copilot, and many more</li>
</ul>
<p>With skills, you no longer have to explain the same things to your AI every time — agents can perform tasks with consistent quality, exactly the way you want.</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AI" term="AI"/>
        <category label="Claude" term="Claude"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Building a Blog Comment API with AWS Serverless]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/03/21/blog-comment-service</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/03/21/blog-comment-service"/>
        <updated>2026-03-21T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[I wanted to add a comment section to this blog, so instead of using an off-the-shelf solution like Disqus or giscus, I built my own API on AWS serverless. Here's a look at the design and implementation.]]></summary>
        <content type="html"><![CDATA[<p>I wanted to add a comment section to this blog, so instead of using an off-the-shelf solution like Disqus or giscus, I built my own API on AWS serverless. Here's a look at the design and implementation.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="architecture">Architecture<a href="https://www.hikari-dev.com/en/blog/2026/03/21/blog-comment-service#architecture" class="hash-link" aria-label="Direct link to Architecture" title="Direct link to Architecture" translate="no">​</a></h2>
<p>Requests flow through the following stack:</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Browser (www.hikari-dev.com)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ↓ HTTPS</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">API Gateway</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ├── GET  /comment?postId=...    → Fetch comments</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ├── POST /comment               → Submit a comment</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  └── PATCH /comment/{id}         → Admin (toggle visibility)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ↓</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Lambda (Node.js 20 / arm64)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  ↓</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">DynamoDB (comment storage)</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  + SES v2 (admin email notifications)</span></span><br></div></code></pre></div></div>
<p>The code is written in TypeScript and managed as IaC with SAM (Serverless Application Model). Lambda runs on arm64 (Graviton2) to shave a bit off the cost.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="dynamodb-table-design">DynamoDB Table Design<a href="https://www.hikari-dev.com/en/blog/2026/03/21/blog-comment-service#dynamodb-table-design" class="hash-link" aria-label="Direct link to DynamoDB Table Design" title="Direct link to DynamoDB Table Design" translate="no">​</a></h2>
<p>The table is named <code>blog-comments</code>, with <code>postId</code> as the partition key and <code>commentId</code> as the sort key.</p>
<table><thead><tr><th>Key</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>postId</code></td><td>String</td><td>Post identifier (e.g. <code>/blog/2026/03/20/hime</code>)</td></tr><tr><td><code>commentId</code></td><td>String</td><td>ULID (lexicographically sortable by time)</td></tr></tbody></table>
<p>Using ULID for the sort key means comments retrieved with <code>QueryCommand</code> are automatically returned in chronological order — which is why I chose ULID over UUID.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="spam-filtering">Spam Filtering<a href="https://www.hikari-dev.com/en/blog/2026/03/21/blog-comment-service#spam-filtering" class="hash-link" aria-label="Direct link to Spam Filtering" title="Direct link to Spam Filtering" translate="no">​</a></h2>
<p>Before writing a comment to DynamoDB, the handler checks it against a keyword list defined in <code>keywords.json</code>.</p>
<p>If a keyword matches, the comment is saved with <code>isHidden: true</code> and <code>isFlagged: "1"</code>, hiding it automatically. If nothing matches, it goes live immediately.</p>
<p><code>isFlagged</code> is used as the key for a Sparse GSI. Comments that pass the filter don't get this attribute at all, which keeps unnecessary partitions from appearing in the index — good for both cost and efficiency. This is achieved simply by setting <code>removeUndefinedValues: true</code> on the DynamoDB Document Client.</p>
<div class="language-typescript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-typescript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> ddb </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> DynamoDBDocumentClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">from</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">client</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  marshallOptions</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    removeUndefinedValues</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="admin-email-notifications">Admin Email Notifications<a href="https://www.hikari-dev.com/en/blog/2026/03/21/blog-comment-service#admin-email-notifications" class="hash-link" aria-label="Direct link to Admin Email Notifications" title="Direct link to Admin Email Notifications" translate="no">​</a></h2>
<p>Every time a comment is submitted, SES v2 sends me an email containing the author name, body, rating, IP address, and flag status.</p>
<p>The email is sent asynchronously, and any failure is silently swallowed. This keeps the POST response time unaffected by email delivery.</p>
<div class="language-typescript codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-typescript codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">sendCommentNotification</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">record</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">catch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"sendCommentNotification error:"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> err</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="privacy">Privacy<a href="https://www.hikari-dev.com/en/blog/2026/03/21/blog-comment-service#privacy" class="hash-link" aria-label="Direct link to Privacy" title="Direct link to Privacy" translate="no">​</a></h2>
<p>IP addresses and User-Agent strings are stored in DynamoDB for moderation purposes, but they are never included in GET responses. This separation is enforced at the type level.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="security">Security<a href="https://www.hikari-dev.com/en/blog/2026/03/21/blog-comment-service#security" class="hash-link" aria-label="Direct link to Security" title="Direct link to Security" translate="no">​</a></h2>
<table><thead><tr><th>Layer</th><th>Measure</th></tr></thead><tbody><tr><td>Network</td><td>AWS WAF rate limit: 100 req / 5 min / IP</td></tr><tr><td>CORS</td><td>Restricted to <code>https://www.hikari-dev.com</code></td></tr><tr><td>Admin API</td><td>API Gateway API key auth (<code>X-Api-Key</code> header)</td></tr><tr><td>Spam</td><td>Keyword filter with automatic hiding</td></tr></tbody></table>
<p>For the admin endpoint (<code>PATCH /comment/{id}</code>), setting <code>ApiKeyRequired: true</code> in the SAM template is all it takes to enable API key authentication — no need to implement a custom Lambda Authorizer.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="wrap-up">Wrap-up<a href="https://www.hikari-dev.com/en/blog/2026/03/21/blog-comment-service#wrap-up" class="hash-link" aria-label="Direct link to Wrap-up" title="Direct link to Wrap-up" translate="no">​</a></h2>
<p>The serverless setup means no server management, and DynamoDB's on-demand billing keeps costs minimal for a low-traffic personal blog.</p>
<p>The whole thing is packaged with SAM + TypeScript + esbuild, and deploying is as simple as <code>sam build &amp;&amp; sam deploy</code>.</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="Web" term="Web"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Creating Hime — A VSCode Extension for Chatting with Multiple Generative AI Agents]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/03/20/hime</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/03/20/hime"/>
        <updated>2026-03-20T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[I built a VSCode extension called Hime (HikariMessage) that lets you chat with multiple AI providers.]]></summary>
        <content type="html"><![CDATA[<p>I built a VSCode extension called <strong>Hime (HikariMessage)</strong> that lets you chat with multiple AI providers.</p>
<p>It follows a BYOK (Bring Your Own Key) model — you just need an API key from each provider you want to use.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="what-is-hime">What is Hime?<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#what-is-hime" class="hash-link" aria-label="Direct link to What is Hime?" title="Direct link to What is Hime?" translate="no">​</a></h2>
<p><a href="https://github.com/Himeyama/hime" target="_blank" rel="noopener noreferrer" class="">Hime</a> is a generative AI chat extension that lives in the VSCode sidebar. It supports Anthropic, OpenAI, Azure OpenAI, OpenRouter, and Ollama, and lets you switch between providers easily via a dropdown menu.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="key-features">Key Features<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#key-features" class="hash-link" aria-label="Direct link to Key Features" title="Direct link to Key Features" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="multiple-ai-provider-support">Multiple AI Provider Support<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#multiple-ai-provider-support" class="hash-link" aria-label="Direct link to Multiple AI Provider Support" title="Direct link to Multiple AI Provider Support" translate="no">​</a></h3>
<p>The following providers are supported:</p>
<ul>
<li class="">Anthropic (Claude)</li>
<li class="">OpenAI</li>
<li class="">Azure OpenAI</li>
<li class="">OpenRouter</li>
<li class="">Ollama</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="streaming-responses">Streaming Responses<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#streaming-responses" class="hash-link" aria-label="Direct link to Streaming Responses" title="Direct link to Streaming Responses" translate="no">​</a></h3>
<p>Responses are displayed in real time, so even long answers feel snappy.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="mcp">MCP<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#mcp" class="hash-link" aria-label="Direct link to MCP" title="Direct link to MCP" translate="no">​</a></h3>
<p>You can enable MCP by adding a JSON configuration in the settings like this:</p>
<blockquote>
<p>Example</p>
</blockquote>
<div class="language-json codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-json codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"filesystem"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"command"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"npx"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"args"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">"-y"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"@modelcontextprotocol/server-filesystem"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"C:\\Users"</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="rich-ui">Rich UI<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#rich-ui" class="hash-link" aria-label="Direct link to Rich UI" title="Direct link to Rich UI" translate="no">​</a></h3>
<ul>
<li class="">Markdown rendering</li>
<li class="">Syntax highlighting for code blocks</li>
<li class="">Copy button for code blocks</li>
<li class="">MCP tool output display</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="persistent-chat-history">Persistent Chat History<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#persistent-chat-history" class="hash-link" aria-label="Direct link to Persistent Chat History" title="Direct link to Persistent Chat History" translate="no">​</a></h3>
<p>Conversation history is saved as JSON files under <code>~/.hime/chats/</code>. You can pick up right where you left off even after restarting VSCode.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="automatic-system-prompt">Automatic System Prompt<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#automatic-system-prompt" class="hash-link" aria-label="Direct link to Automatic System Prompt" title="Direct link to Automatic System Prompt" translate="no">​</a></h3>
<p>Workspace information, OS details, and the context of your currently open editor are automatically injected into the system prompt. Just say "fix this file" and the AI already knows what you're looking at.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="setup">Setup<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#setup" class="hash-link" aria-label="Direct link to Setup" title="Direct link to Setup" translate="no">​</a></h2>
<p>Requires Node.js 20+ and VSCode 1.96+.</p>
<div class="language-bash codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-bash codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">git</span><span class="token plain"> clone https://github.com/Himeyama/hime</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token builtin class-name">cd</span><span class="token plain"> hime</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> run </span><span class="token function" style="color:#d73a49">watch</span><span class="token plain">   </span><span class="token comment" style="color:#999988;font-style:italic"># Development: watches both Extension Host and Webview simultaneously</span></span><br></div></code></pre></div></div>
<p>Then press F5 in VSCode to launch the extension host. API keys can be entered via the settings panel in the sidebar and are stored encrypted using VSCode's SecretStorage.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="wrapping-up">Wrapping Up<a href="https://www.hikari-dev.com/en/blog/2026/03/20/hime#wrapping-up" class="hash-link" aria-label="Direct link to Wrapping Up" title="Direct link to Wrapping Up" translate="no">​</a></h2>
<p>Hime's strength is that you can interact with AI without leaving your editor — and even delegate tool execution via MCP. Give it a try!</p>
<p>Repository: <a href="https://github.com/Himeyama/hime" target="_blank" rel="noopener noreferrer" class="">https://github.com/Himeyama/hime</a></p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="VoiceVox" term="VoiceVox"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[I Built a Cloud Storage Service with AWS Serverless]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/03/18/storage</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/03/18/storage"/>
        <updated>2026-03-18T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Introduction]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="introduction">Introduction<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#introduction" class="hash-link" aria-label="Direct link to Introduction" title="Direct link to Introduction" translate="no">​</a></h2>
<p>I wanted a personal file sharing system, so I built a file storage service using only AWS serverless services.</p>
<p>In this article, I'll walk through the key design decisions and the actual architecture I ended up with.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="what-i-built">What I Built<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#what-i-built" class="hash-link" aria-label="Direct link to What I Built" title="Direct link to What I Built" translate="no">​</a></h2>
<p>The cloud storage service that lets you upload, download, and manage folders through a web browser.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="key-features">Key Features<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#key-features" class="hash-link" aria-label="Direct link to Key Features" title="Direct link to Key Features" translate="no">​</a></h3>
<ul>
<li class="">File upload / download</li>
<li class="">Folder creation and hierarchical management</li>
<li class="">Bulk ZIP download of multiple files / folders</li>
<li class="">User authentication (sign-up, login, password reset)</li>
<li class="">User profile management</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="architecture">Architecture<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#architecture" class="hash-link" aria-label="Direct link to Architecture" title="Direct link to Architecture" translate="no">​</a></h2>
<p>Here's the architecture diagram.</p>
<p><img decoding="async" loading="lazy" src="https://www.hikari-dev.com/en/assets/images/structure.drawio-ebc5ae4a7d9232039795235391695759.png" width="1204" height="858" class="img_y1Im"></p>
<p>Most of the authentication is handled by Cognito. For file transfers, Lambda issues S3 Presigned URLs so the client communicates directly with S3.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="tech-stack">Tech Stack<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#tech-stack" class="hash-link" aria-label="Direct link to Tech Stack" title="Direct link to Tech Stack" translate="no">​</a></h2>
<table><thead><tr><th>Layer</th><th>Technology</th></tr></thead><tbody><tr><td>Backend</td><td>C# (.NET 8) / AWS Lambda</td></tr><tr><td>Authentication</td><td>Amazon Cognito + Managed Login v2</td></tr><tr><td>API</td><td>API Gateway (REST) + Cognito Authorizer</td></tr><tr><td>Storage</td><td>Amazon S3</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="design-decisions-and-reasoning">Design Decisions and Reasoning<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#design-decisions-and-reasoning" class="hash-link" aria-label="Direct link to Design Decisions and Reasoning" title="Direct link to Design Decisions and Reasoning" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="using-cognito-for-authentication">Using Cognito for Authentication<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#using-cognito-for-authentication" class="hash-link" aria-label="Direct link to Using Cognito for Authentication" title="Direct link to Using Cognito for Authentication" translate="no">​</a></h3>
<p>I leveraged Cognito's OAuth 2.0 endpoints and Managed Login to implement authentication.</p>
<p>In the end, I only needed a single Lambda function for auth: <code>TokenFunction</code>.</p>
<p>In terms of both functionality and security, less code is better. There's no need to write what AWS services already do for you.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="file-transfers-via-presigned-urls">File Transfers via Presigned URLs<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#file-transfers-via-presigned-urls" class="hash-link" aria-label="Direct link to File Transfers via Presigned URLs" title="Direct link to File Transfers via Presigned URLs" translate="no">​</a></h3>
<p>Routing file uploads and downloads through Lambda introduces several problems:</p>
<ul>
<li class="">Hitting Lambda's payload size limit</li>
<li class="">Loading large files into Lambda memory is costly</li>
<li class="">Transfer time counts against Lambda execution time</li>
</ul>
<p>With Presigned URLs, Lambda only issues the URL — the actual file transfer happens directly between the browser and S3.</p>
<p>Lambda execution time stays in the tens of milliseconds, and the file size limit extends all the way to S3's own limits.</p>
<div class="language-text codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-text codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">Upload flow:</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">1. Browser → Lambda: "I want to upload file.pdf! Send me an upload URL."</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">2. Lambda → Browser: "Here's a Presigned URL. PUT your file here."</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">3. Browser → S3: "Sending PUT to S3."</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">4. Browser → Lambda: "Upload complete!"</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="zip-download-for-folders">ZIP Download for Folders<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#zip-download-for-folders" class="hash-link" aria-label="Direct link to ZIP Download for Folders" title="Direct link to ZIP Download for Folders" translate="no">​</a></h3>
<p>S3 doesn't have a built-in feature to download an entire folder.</p>
<p>For bulk downloads, I generate a ZIP file in Lambda, temporarily store it in S3, and return a Presigned URL for it.</p>
<p>The temporary ZIP file is automatically deleted after 1 day via an S3 lifecycle rule, so there's no garbage buildup.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="security">Security<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#security" class="hash-link" aria-label="Direct link to Security" title="Direct link to Security" translate="no">​</a></h2>
<table><thead><tr><th>Measure</th><th>Implementation</th></tr></thead><tbody><tr><td>Brute-force protection</td><td>Cognito's built-in lockout (5 failures: 15-minute lock)</td></tr><tr><td>API protection</td><td>JWT verification via Cognito Authorizer</td></tr><tr><td>CORS</td><td><code>AllowedOrigin</code> restricted to a specific domain</td></tr><tr><td>Temporary file management</td><td>S3 lifecycle rule auto-deletes files after 1 day</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="cost">Cost<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#cost" class="hash-link" aria-label="Direct link to Cost" title="Direct link to Cost" translate="no">​</a></h2>
<p>With a serverless architecture, costs are nearly zero when not in use.</p>
<ul>
<li class=""><strong>Cognito</strong>: ESSENTIALS Tier is free up to 10,000 MAU</li>
<li class=""><strong>Lambda</strong>: Free up to 1 million requests per month</li>
<li class=""><strong>S3</strong>: Pay-as-you-go based on storage used (~$0.025/GB per month)</li>
<li class=""><strong>API Gateway</strong>: $3.50 per 1 million requests</li>
</ul>
<p>For personal use, monthly costs should land somewhere between a few cents and a couple of dollars.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="infrastructure-as-code">Infrastructure as Code<a href="https://www.hikari-dev.com/en/blog/2026/03/18/storage#infrastructure-as-code" class="hash-link" aria-label="Direct link to Infrastructure as Code" title="Direct link to Infrastructure as Code" translate="no">​</a></h2>
<p>The entire infrastructure is defined in a single <code>template.yaml</code> (AWS SAM).</p>
<p>Cognito User Pool, API Gateway, 3 Lambda functions, S3 bucket, CloudWatch alarms, SNS — all resources defined in roughly 600 lines of YAML.</p>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="AWS" term="AWS"/>
        <category label="Hardware" term="Hardware"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Installing Rocky Linux 8.10 on WSL2]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/02/11/wsl-rocky8</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/02/11/wsl-rocky8"/>
        <updated>2026-02-11T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Download the WSL 2 Image]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="download-the-wsl-2-image">Download the WSL 2 Image<a href="https://www.hikari-dev.com/en/blog/2026/02/11/wsl-rocky8#download-the-wsl-2-image" class="hash-link" aria-label="Direct link to Download the WSL 2 Image" title="Direct link to Download the WSL 2 Image" translate="no">​</a></h2>
<p>Download the Rocky Linux container image from the following URL:</p>
<p><a href="https://dl.rockylinux.org/pub/rocky/8/images/x86_64/Rocky-8-Container-Base.latest.x86_64.tar.xz" target="_blank" rel="noopener noreferrer" class="">https://dl.rockylinux.org/pub/rocky/8/images/x86_64/Rocky-8-Container-Base.latest.x86_64.tar.xz</a></p>
<p>Reference: <a href="https://docs.rockylinux.org/8/guides/interoperability/import_rocky_to_wsl/" target="_blank" rel="noopener noreferrer" class="">https://docs.rockylinux.org/8/guides/interoperability/import_rocky_to_wsl/</a></p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="extract-the-image">Extract the Image<a href="https://www.hikari-dev.com/en/blog/2026/02/11/wsl-rocky8#extract-the-image" class="hash-link" aria-label="Direct link to Extract the Image" title="Direct link to Extract the Image" translate="no">​</a></h2>
<p>Extract the <code>.tar.xz</code> file and convert it into a <code>.tar</code> archive.<br>
<!-- -->WSL2 can import <code>.tar</code> files directly.</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">cd ~/Downloads</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">xz -d Rocky-8-Container-Base.latest.x86_64.tar.xz</span></span><br></div></code></pre></div></div>
<p><em>Note: The built‑in Windows <code>bsdtar</code> cannot extract this file.</em><br>
<em>If the <code>xz</code> command is not available, install it via Cygwin64 or use another WSL distribution.</em></p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="import-the-image-into-wsl2">Import the Image into WSL2<a href="https://www.hikari-dev.com/en/blog/2026/02/11/wsl-rocky8#import-the-image-into-wsl2" class="hash-link" aria-label="Direct link to Import the Image into WSL2" title="Direct link to Import the Image into WSL2" translate="no">​</a></h2>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl --import RockyLinux-8.10 $HOME .\Rocky-8-Container-Base.latest.x86_64.tar --version 2</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="verify-the-imported-image">Verify the Imported Image<a href="https://www.hikari-dev.com/en/blog/2026/02/11/wsl-rocky8#verify-the-imported-image" class="hash-link" aria-label="Direct link to Verify the Imported Image" title="Direct link to Verify the Imported Image" translate="no">​</a></h2>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -l -v</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="add-a-user-and-set-the-default-user">Add a User and Set the Default User<a href="https://www.hikari-dev.com/en/blog/2026/02/11/wsl-rocky8#add-a-user-and-set-the-default-user" class="hash-link" aria-label="Direct link to Add a User and Set the Default User" title="Direct link to Add a User and Set the Default User" translate="no">​</a></h2>
<blockquote>
<p>Example (Username: hikari)</p>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- dnf install sudo passwd -y</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- adduser hikari</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- passwd -d hikari</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- usermod -aG wheel hikari</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- sed -i 's/^# %wheel/%wheel/' /etc/sudoers</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10 -u root -- echo -e "[user]\ndefault=hikari" | tee -a /etc/wsl.conf</span></span><br></div></code></pre></div></div>
</blockquote>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="launch-the-image">Launch the Image<a href="https://www.hikari-dev.com/en/blog/2026/02/11/wsl-rocky8#launch-the-image" class="hash-link" aria-label="Direct link to Launch the Image" title="Direct link to Launch the Image" translate="no">​</a></h2>
<div class="language-ps1 codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-ps1 codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">wsl -d RockyLinux-8.10</span></span><br></div></code></pre></div></div>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
        <category label="Linux" term="Linux"/>
        <category label="WSL" term="WSL"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Investigation into the Best Compression Method]]></title>
        <id>https://www.hikari-dev.com/en/blog/2026/01/17/x</id>
        <link href="https://www.hikari-dev.com/en/blog/2026/01/17/x"/>
        <updated>2026-01-17T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Conclusion]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="conclusion">Conclusion<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#conclusion" class="hash-link" aria-label="Direct link to Conclusion" title="Direct link to Conclusion" translate="no">​</a></h2>
<p>To start with the conclusion.</p>
<p>I measured the time and size when compressing and extracting a large set of files totaling 34 GiB.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="compression--archive-creation">Compression / Archive Creation<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#compression--archive-creation" class="hash-link" aria-label="Direct link to Compression / Archive Creation" title="Direct link to Compression / Archive Creation" translate="no">​</a></h2>
<table><thead><tr><th>Method</th><th>Command</th><th>real</th><th>user</th><th>sys</th><th>Compressed size</th></tr></thead><tbody><tr><td><strong>tar</strong></td><td><code>tar cf large-pkg.tar large-pkg</code></td><td>1m19.449s</td><td>0m6.702s</td><td>0m48.121s</td><td>26 GiB</td></tr><tr><td><strong>tar.gz</strong></td><td><code>tar czf large-pkg.tar.gz large-pkg</code></td><td>11m33.942s</td><td>11m18.811s</td><td>0m55.573s</td><td>5.5 GiB</td></tr><tr><td><strong>LZ4</strong></td><td><code>tar cf - large-pkg | lz4 &gt; large-pkg.tar.lz4</code></td><td>3m33.187s</td><td>0m53.958s</td><td>2m57.122s</td><td>8.6 GiB</td></tr><tr><td><strong>zstd</strong></td><td><code>tar cf - large-pkg | zstd -T0 -o large-pkg.tar.zst</code></td><td>9m13.819s</td><td>1m45.049s</td><td>2m43.609s</td><td>4.8 GiB</td></tr><tr><td><strong>bzip2</strong></td><td><code>tar cf - large-pkg.1 | bzip2 &gt; large-pkg.tar.bz2</code></td><td>37m22.743s</td><td>28m40.329s</td><td>3m31.000s</td><td>4.3 GiB</td></tr><tr><td><strong>xz</strong></td><td><code>tar cf - large-pkg | xz &gt; large-pkg.tar.xz</code></td><td>125m31.447s</td><td>124m10.523s</td><td>5m18.330s</td><td>3.3 GiB</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="extraction-decompression">Extraction (Decompression)<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#extraction-decompression" class="hash-link" aria-label="Direct link to Extraction (Decompression)" title="Direct link to Extraction (Decompression)" translate="no">​</a></h2>
<table><thead><tr><th>Method</th><th>Command</th><th>real</th><th>user</th><th>sys</th></tr></thead><tbody><tr><td><strong>tar</strong></td><td><code>tar xf large-pkg.tar</code></td><td>2m11.793s</td><td>0m6.906s</td><td>2m4.183s</td></tr><tr><td><strong>tar.gz</strong></td><td><code>tar xf large-pkg.tar.gz</code></td><td>3m39.544s</td><td>2m1.189s</td><td>2m58.317s</td></tr><tr><td><strong>tar.gz (gzip)</strong></td><td><code>gzip -dc large-pkg.tar.gz | tar xf -</code></td><td>3m40.416s</td><td>2m0.272s</td><td>3m0.043s</td></tr><tr><td><strong>tar.gz (pigz)</strong></td><td><code>pigz -dc large-pkg.tar.gz | tar xf -</code></td><td>3m53.711s</td><td>1m38.147s</td><td>4m42.893s</td></tr><tr><td><strong>LZ4</strong></td><td><code>lz4 -dc large-pkg.tar.lz4 | tar xf -</code></td><td>4m46.576s</td><td>0m32.174s</td><td>4m36.055s</td></tr><tr><td><strong>zstd</strong></td><td><code>zstd -dc large-pkg.tar.zst | tar xf -</code></td><td>3m46.419s</td><td>0m46.533s</td><td>3m34.668s</td></tr><tr><td><strong>bzip2</strong></td><td><code>bzip2 -dc large-pkg.tar.bz2 | tar xf -</code></td><td>11m31.287s</td><td>9m52.644s</td><td>4m17.974s</td></tr><tr><td><strong>xz</strong></td><td><code>xz -dc large-pkg.tar.xz | tar xf -</code></td><td>8m11.527s</td><td>3m45.562s</td><td>7m15.109s</td></tr></tbody></table>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="preparing-many-small-files">Preparing many small files<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#preparing-many-small-files" class="hash-link" aria-label="Direct link to Preparing many small files" title="Direct link to Preparing many small files" translate="no">​</a></h2>
<p>First, I decided to use node_modules as many small files.</p>
<p>I set package.json as below. The packages are arbitrary.</p>
<details class="details_rvcR alert alert--info details_Kt6x" data-collapsed="true"><summary>package.json</summary><div><div class="collapsibleContent_IDV4"><div class="language-js codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-js codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"name"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"large-pkg"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"version"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"1.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"description"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">""</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"author"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">""</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"type"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"commonjs"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"main"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"index.js"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"scripts"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"test"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"dependencies"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"async"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.2.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"axios"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.13.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"bcryptjs"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.0.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"bluebird"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.7.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"body-parser"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.2.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"chalk"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.6.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"chalk-template"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.1.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"cheerio"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.1.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"chokidar"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"commander"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^14.0.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"cookie"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.1.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"core-js"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.47.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"cors"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.8.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"debug"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.4.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"dotenv"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^17.2.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"express"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.2.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"fast-glob"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.3.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"form-data"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.0.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"glob"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^13.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"got"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^14.6.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"inquirer"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^13.2.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"jsonwebtoken"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.0.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"lodash"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.17.21"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mime"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.1.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"minimist"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.2.8"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mkdirp"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.0.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mkdirp-classic"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.5.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mongoose"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.1.4"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ms"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.1.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"node-fetch"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.3.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ora"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"passport"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.7.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"prop-types"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^15.8.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"qs"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.14.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"react"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^19.2.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"react-dom"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^19.2.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"request"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.88.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"rimraf"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.1.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"semver"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.7.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"sharp"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.34.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"socket.io"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.8.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"supports-color"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.2.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"tslib"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.8.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"uuid"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^13.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ws"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^8.19.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"xml2js"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.6.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"yargs"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^18.0.0"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token string-property property" style="color:#36acaa">"devDependencies"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"@babel/cli"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.28.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"@babel/plugin-transform-runtime"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.28.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"@babel/preset-env"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.28.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"@babel/runtime"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.28.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"autoprefixer"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.4.23"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ava"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.4.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"babel-core"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.26.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"babel-loader"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"chai"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.2.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"commitlint"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^20.3.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"concurrently"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.2.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"conventional-changelog"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.1.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"cross-env"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.1.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"css-loader"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.1.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"dotenv-expand"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^12.0.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^8.57.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-config-prettier"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.1.8"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-config-standard"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^17.1.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-import"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^2.32.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-jsx-a11y"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.10.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-node"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^11.1.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-prettier"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.5.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"eslint-plugin-react"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.37.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"husky"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.1.7"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"jest"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^30.2.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"less"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.5.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"lint-staged"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^16.2.7"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"mocha"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^11.7.5"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"nodemon"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.1.11"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"playwright"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.57.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"pm2"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.0.14"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"postcss"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^8.5.6"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"prettier"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^3.8.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"puppeteer"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^24.35.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"rollup"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.55.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"rxjs"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.8.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"sass"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^1.97.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"semantic-release"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^25.0.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"sinon"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^21.0.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"style-loader"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.0.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"stylus"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^0.64.0"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"supertest"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.2.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"tailwindcss"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.1.18"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ts-loader"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^9.5.4"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"ts-node"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^10.9.2"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"typescript"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.9.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"vite"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^7.3.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"vitest"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^4.0.17"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"webpack"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.104.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"webpack-cli"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^6.0.1"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"webpack-dev-server"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^5.2.3"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token string-property property" style="color:#36acaa">"zx"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"^8.8.5"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></div></code></pre></div></div></div></div></details>
<p>From here, create node_modules with the following command.</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> i</span></span><br></div></code></pre></div></div>
<p>Check the size.</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">du</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-h</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-d1</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">566M    ./node_modules</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">567M    </span><span class="token builtin class-name">.</span></span><br></div></code></pre></div></div>
<p>This shows that many small files were created.</p>
<p>Copy node_modules to create even more files.</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token keyword" style="color:#00009f">for</span><span class="token plain"> </span><span class="token for-or-select variable" style="color:#36acaa">i</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">in</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">..</span><span class="token number" style="color:#36acaa">59</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">do</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token builtin class-name">echo</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"node_modules.</span><span class="token string variable" style="color:#36acaa">${i}</span><span class="token string" style="color:#e3116c"> をコピー中..."</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">    </span><span class="token function" style="color:#d73a49">cp</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-r</span><span class="token plain"> node_modules </span><span class="token string" style="color:#e3116c">"node_modules.</span><span class="token string variable" style="color:#36acaa">${i}</span><span class="token string" style="color:#e3116c">"</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token keyword" style="color:#00009f">done</span></span><br></div></code></pre></div></div>
<p>Check the size.</p>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">du</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-h</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-d1</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">..</span><span class="token plain">.</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">34G     </span><span class="token builtin class-name">.</span></span><br></div></code></pre></div></div>
<p>This becomes a fairly large size.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="tarball">tarball<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#tarball" class="hash-link" aria-label="Direct link to tarball" title="Direct link to tarball" translate="no">​</a></h2>
<p>Let's see the speed of creating a tarball.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="archive">Archive<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#archive" class="hash-link" aria-label="Direct link to Archive" title="Direct link to Archive" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">tar</span><span class="token plain"> cf large-pkg.tar large-pkg</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    1m19.449s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m6.702s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     0m48.121s</span></span><br></div></code></pre></div></div>
<p>After archiving: 26 GiB</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="extraction">Extraction<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#extraction" class="hash-link" aria-label="Direct link to Extraction" title="Direct link to Extraction" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">tar</span><span class="token plain"> xf large-pkg.tar</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    2m11.793s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m6.906s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     2m4.183s</span></span><br></div></code></pre></div></div>
<p>Archiving and extraction are reasonably fast.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="targz">tar.gz<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#targz" class="hash-link" aria-label="Direct link to tar.gz" title="Direct link to tar.gz" translate="no">​</a></h2>
<p>Next, try tar.gz.</p>
<p>The tar command creates an archive, and gzip is a command to compress a single file. Combined, they create a tar.gz file. Nowadays the tar command alone can compress and extract tar.gz files. (The same applies to other compression formats.)</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="compression">Compression<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#compression" class="hash-link" aria-label="Direct link to Compression" title="Direct link to Compression" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">tar</span><span class="token plain"> czf large-pkg.tar.gz large-pkg</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    11m33.942s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    11m18.811s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     0m55.573s</span></span><br></div></code></pre></div></div>
<p>After compression: 5.5 GiB</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="extraction-1">Extraction<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#extraction-1" class="hash-link" aria-label="Direct link to Extraction" title="Direct link to Extraction" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">tar</span><span class="token plain"> xf large-pkg.tar.gz</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m39.544s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    2m1.189s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     2m58.317s</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="extracting-with-tar-and-gzip">Extracting with tar and gzip<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#extracting-with-tar-and-gzip" class="hash-link" aria-label="Direct link to Extracting with tar and gzip" title="Direct link to Extracting with tar and gzip" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'gzip -dc large-pkg.tar.gz | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m40.416s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    2m0.272s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     3m0.043s</span></span><br></div></code></pre></div></div>
<p>Speed is almost the same.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="parallel-extraction-pigz">Parallel extraction (pigz)<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#parallel-extraction-pigz" class="hash-link" aria-label="Direct link to Parallel extraction (pigz)" title="Direct link to Parallel extraction (pigz)" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'pigz -dc large-pkg.tar.gz | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m53.711s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    1m38.147s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     4m42.893s</span></span><br></div></code></pre></div></div>
<p>Not much change. It seems disk I/O is the bottleneck.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="bzip2">bzip2<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#bzip2" class="hash-link" aria-label="Direct link to bzip2" title="Direct link to bzip2" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="compression-1">Compression<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#compression-1" class="hash-link" aria-label="Direct link to Compression" title="Direct link to Compression" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'tar cf - large-pkg.1 | bzip2 &gt; large-pkg.tar.bz2'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    37m22.743s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    28m40.329s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     3m31.000s</span></span><br></div></code></pre></div></div>
<p>After compression: 4.3 GiB</p>
<p>Compression takes long, but the compression ratio is fairly good.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="extraction-2">Extraction<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#extraction-2" class="hash-link" aria-label="Direct link to Extraction" title="Direct link to Extraction" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'bzip2 -dc large-pkg.tar.bz2 | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    11m31.287s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    9m52.644s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     4m17.974s</span></span><br></div></code></pre></div></div>
<p>Extraction also takes time, but the decompression ratio is fairly good.</p>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="xz">xz<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#xz" class="hash-link" aria-label="Direct link to xz" title="Direct link to xz" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="compression-2">Compression<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#compression-2" class="hash-link" aria-label="Direct link to Compression" title="Direct link to Compression" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'tar cf - large-pkg | xz &gt; large-pkg.tar.xz'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    125m31.447s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    124m10.523s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     5m18.330s</span></span><br></div></code></pre></div></div>
<p>After compression: 3.3 GiB</p>
<p>Compression ratio is excellent, but it takes too long.</p>
<p>If your network is extremely slow, storage costs are high, and you use it only rarely (e.g., once every few years), it might be acceptable.</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="extraction-3">Extraction<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#extraction-3" class="hash-link" aria-label="Direct link to Extraction" title="Direct link to Extraction" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'xz -dc large-pkg.tar.xz | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    8m11.527s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    3m45.562s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     7m15.109s</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="lz4">LZ4<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#lz4" class="hash-link" aria-label="Direct link to LZ4" title="Direct link to LZ4" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="compression-3">Compression<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#compression-3" class="hash-link" aria-label="Direct link to Compression" title="Direct link to Compression" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'tar cf - large-pkg | lz4 &gt; large-pkg.tar.lz4'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m33.187s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m53.958s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     2m57.122s</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="extraction-4">Extraction<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#extraction-4" class="hash-link" aria-label="Direct link to Extraction" title="Direct link to Extraction" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'lz4 -dc large-pkg.tar.lz4 | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    4m46.576s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m32.174s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     4m36.055s</span></span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_DVDF" id="zstd">zstd<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#zstd" class="hash-link" aria-label="Direct link to zstd" title="Direct link to zstd" translate="no">​</a></h2>
<p>zstd is a fast compression method developed by Meta (formerly Facebook).</p>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="compression-4">Compression<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#compression-4" class="hash-link" aria-label="Direct link to Compression" title="Direct link to Compression" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'tar cf - large-pkg | zstd -T0 -o large-pkg.tar.zst'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">/*stdin*</span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain">            </span><span class="token builtin class-name">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">18.57</span><span class="token plain">%   </span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">27492075520</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">5106239218</span><span class="token plain"> bytes, large-pkg.tar.zst</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    9m13.819s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    1m45.049s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     2m43.609s</span></span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_DVDF" id="extraction-5">Extraction<a href="https://www.hikari-dev.com/en/blog/2026/01/17/x#extraction-5" class="hash-link" aria-label="Direct link to Extraction" title="Direct link to Extraction" translate="no">​</a></h3>
<div class="language-sh codeBlockContainer_LUYH theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_XysQ"><pre tabindex="0" class="prism-code language-sh codeBlock_HQpb thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_Xxbg codeBlockLinesWithNumbering_ryYP" style="counter-reset:line-count 0"><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">$ </span><span class="token function" style="color:#d73a49">time</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">sh</span><span class="token plain"> </span><span class="token parameter variable" style="color:#36acaa">-c</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'zstd -dc large-pkg.tar.zst | tar xf -'</span><span class="token plain"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">large-pkg.tar.zst   </span><span class="token builtin class-name">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">27492075520</span><span class="token plain"> bytes</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain" style="display:inline-block"></span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">real    3m46.419s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">user    0m46.533s</span></span><br></div><div class="token-line codeLine_nxDQ" style="color:#393A34"><span class="codeLineNumber_Q10f"></span><span class="codeLineContent_I2vs"><span class="token plain">sys     3m34.668s</span></span><br></div></code></pre></div></div>]]></content>
        <author>
            <name>ひかり</name>
            <uri>https://www.hikari-dev.com/</uri>
        </author>
    </entry>
</feed>