diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..c21c654
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# デフォルトの無視対象ファイル
+/shelf/
+/workspace.xml
+# エディターベースの HTTP クライアントリクエスト
+/httpRequests/
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
new file mode 100644
index 0000000..5055868
--- /dev/null
+++ b/.idea/codeStyles/Project.xml
@@ -0,0 +1,63 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>
\ No newline at end of file
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 0000000..79ee123
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..03d9549
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..4cd553b
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/svelte-diff-highlighting.iml" filepath="$PROJECT_DIR$/.idea/svelte-diff-highlighting.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
new file mode 100644
index 0000000..ea0f3cf
--- /dev/null
+++ b/.idea/prettier.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="MANUAL" />
+    <option name="myRunOnSave" value="true" />
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/svelte-diff-highlighting.iml b/.idea/svelte-diff-highlighting.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/svelte-diff-highlighting.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/src/lib/ui/Highlighted.svelte b/src/lib/ui/Highlighted.svelte
index 86bee86..a43894f 100644
--- a/src/lib/ui/Highlighted.svelte
+++ b/src/lib/ui/Highlighted.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <div class="scroll svelte-diff-highlighting">
-	<p class="highlighted">
+	<p class="highlighted" translate="no">
 		{#each lines as line, i}
 			{@const lineNumber = i + 1}
 			<span class="line">
@@ -76,9 +76,8 @@
 		background: var(--background, none);
 		margin: var(--margin, 0);
 		padding: var(--padding, 0);
-		white-space: var(--white-space, pre-wrap);
+		white-space: pre-wrap;
 		tab-size: var(--tab-size, 2);
-		box-sizing: var(--box-sizing, border-box);
 		scrollbar-width: var(--scrollbar-width, thin);
 		scrollbar-color: var(--scrollbar-color, auto);
 
@@ -87,7 +86,7 @@
 			width: var(--content-width, max-content);
 			height: var(--content-height, max-content);
 			padding: calc(var(--line-number-font-size, 14px) * 0.4) 0;
-			white-space: nowrap;
+			white-space: var(--white-space, nowrap);
 			user-select: none;
 			-webkit-user-select: none;
 			--omission-icon-size: calc(var(--line-number-font-size, 14px) * 0.8);
diff --git a/src/lib/ui/HighlightedRemovedLines.svelte b/src/lib/ui/HighlightedRemovedLines.svelte
index 50f1a8c..42c1ad4 100644
--- a/src/lib/ui/HighlightedRemovedLines.svelte
+++ b/src/lib/ui/HighlightedRemovedLines.svelte
@@ -56,7 +56,7 @@
 					display: block;
 					width: calc(100% - var(--omission-icon-size));
 					height: 100%;
-					background-color: var(--removed-line-color, #ffb74c);
+					background-color: var(--omission-icon-color, #ffb74c);
 				}
 
 				display: flex;
diff --git a/src/lib/ui/OmissionIcon.svelte b/src/lib/ui/OmissionIcon.svelte
index 7768646..3b7c944 100644
--- a/src/lib/ui/OmissionIcon.svelte
+++ b/src/lib/ui/OmissionIcon.svelte
@@ -6,9 +6,7 @@
 	}
 </script>
 
-<button class="omission-icon" class:open on:click={toggle}>
-	<span class="circle"></span>
-</button>
+<button class="omission-icon" class:open on:click={toggle} />
 
 <style>
 	.omission-icon {
diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte
new file mode 100644
index 0000000..093071f
--- /dev/null
+++ b/src/routes/api/+page.svelte
@@ -0,0 +1,269 @@
+<script lang="ts">
+	import BorderedSection from '$sample/components/section/BorderedSection.svelte';
+	import SectionTitleText from '$sample/components/text/SectionTitleText.svelte';
+	import PropertyList from '$sample/components/propertyList/PropertyList.svelte';
+	import type { PropertyItem } from '$sample/components/propertyList/propertyItem.js';
+
+	const properties: readonly PropertyItem[] = [
+		{
+			name: 'text',
+			type: 'string',
+			required: false,
+			default: "''",
+			description: 'The string to be syntax highlighted'
+		},
+		{
+			name: 'old',
+			type: 'string',
+			required: false,
+			default: 'undefined',
+			description: 'Used only when a diff display is needed.'
+		},
+		{
+			name: 'languages',
+			type: 'readonly Language[]',
+			required: false,
+			default: 'Language.allCases',
+			description:
+				'List of languages registered with Highlight.js. If using a language not available in this library, create a custom Language instance and combine it with Language.allCases in the property'
+		},
+		{
+			name: 'language',
+			type: 'Language',
+			required: false,
+			default: 'undefined',
+			description:
+				'The language to be highlighted by Highlight.js. Specify a language included in languages. If not specified, the language of the text will be automatically determined.'
+		},
+		{
+			name: 'setNumber',
+			type: 'boolean',
+			required: false,
+			default: 'false',
+			description: 'Whether to display line numbers or not'
+		}
+	];
+
+	const cssProperties: readonly PropertyItem[] = [
+		{
+			name: '--width',
+			type: 'width',
+			required: false,
+			default: '100%',
+			description: 'Overall width of the component'
+		},
+		{
+			name: '--max-width',
+			type: 'max-width',
+			required: false,
+			default: '100%',
+			description: 'Maximum width of the component'
+		},
+		{
+			name: '--height',
+			type: 'height',
+			required: false,
+			default: '100%',
+			description: 'Overall height of the component'
+		},
+		{
+			name: '--overflow-x',
+			type: 'overflow-x',
+			required: false,
+			default: 'auto',
+			description: 'Behavior when source code overflows horizontally. Defaults to scrollable'
+		},
+		{
+			name: '--overflow-y',
+			type: 'overflow-y',
+			required: false,
+			default: 'auto',
+			description: 'Behavior when source code overflows vertically. Defaults to scrollable'
+		},
+		{
+			name: '--background',
+			type: 'background',
+			required: false,
+			default: 'none',
+			description: 'Background of the entire component'
+		},
+		{
+			name: '--margin',
+			type: 'margin',
+			required: false,
+			default: '0',
+			description: 'Margin setting for the entire component'
+		},
+		{
+			name: '--padding',
+			type: 'padding',
+			required: false,
+			default: '0',
+			description:
+				'Padding setting inside the scrollable area. Can reduce the display area for the source code'
+		},
+		{
+			name: '--scrollbar-width',
+			type: 'scrollbar-width',
+			required: false,
+			default: 'thin',
+			description: 'Width of the scrollbar'
+		},
+		{
+			name: '--scrollbar-color',
+			type: 'scrollbar-color',
+			required: false,
+			default: 'auto',
+			description: 'Color of the scrollbar'
+		},
+		{
+			name: '--content-width',
+			type: 'width',
+			required: false,
+			default: 'max-content',
+			description: 'Width of the source code'
+		},
+		{
+			name: '--content-height',
+			type: 'height',
+			required: false,
+			default: 'max-content',
+			description: 'Height of the source code'
+		},
+		{
+			name: '--line-number-font-size',
+			type: 'font-size',
+			required: false,
+			default: '14px',
+			description: 'Font size of the line numbers'
+		},
+		{
+			name: '--white-space',
+			type: 'white-space',
+			required: false,
+			default: 'nowrap',
+			description: 'White-space setting for the source code'
+		},
+		{
+			name: '--added-marker-border-color',
+			type: 'background-color',
+			required: false,
+			default: '#4ca9ffff',
+			description: 'Color of the left border marker for added lines'
+		},
+		{
+			name: '--added-marker-border-width',
+			type: 'width',
+			required: false,
+			default: '4px',
+			description: 'Width of the left border marker for added lines'
+		},
+		{
+			name: '--added-marker-background-color',
+			type: 'background-color',
+			required: false,
+			default: '#eaf3ffff',
+			description: 'Background color of the marker for added lines'
+		},
+		{
+			name: '--line-height',
+			type: 'line-height',
+			required: false,
+			default: '1.4',
+			description: 'Line-height for the source code'
+		},
+		{
+			name: '--line-number-text-align',
+			type: 'text-align',
+			required: false,
+			default: 'right',
+			description: 'Text alignment for the line numbers'
+		},
+		{
+			name: '--line-number-color',
+			type: 'color',
+			required: false,
+			default: '#6e6e73ff',
+			description: 'Text color of the line numbers'
+		},
+		{
+			name: '--line-number-font-weight',
+			type: 'font-weight',
+			required: false,
+			default: 'normal',
+			description: 'Font weight of the line numbers'
+		},
+		{
+			name: '--line-number-font-size',
+			type: 'font-size',
+			required: false,
+			default: '14px',
+			description: 'Font size of the line numbers'
+		},
+		{
+			name: '--line-number-font-family',
+			type: 'font-family',
+			required: false,
+			default: 'monospace',
+			description: 'Font of the line numbers'
+		},
+		{
+			name: '--line-number-margin-right',
+			type: 'margin-right',
+			required: false,
+			default: '1em',
+			description: 'Margin between the line numbers and the source code'
+		},
+		{
+			name: '--line-number-margin-left',
+			type: 'margin-left',
+			required: false,
+			default: '0.5em',
+			description: 'Distance from the left edge of the line numbers'
+		},
+		{
+			name: '--omission-icon-color',
+			type: 'background-color',
+			required: false,
+			default: '#ffb74c',
+			description: 'Color of the toggle button for omitted lines'
+		},
+		{
+			name: '--removed-marker-border-color',
+			type: 'background-color',
+			required: false,
+			default: '#ffb74c',
+			description: 'Color of the left border marker for removed lines'
+		},
+		{
+			name: '--removed-marker-border-width',
+			type: 'width',
+			required: false,
+			default: '4px',
+			description: 'Width of the left border marker for removed lines'
+		},
+		{
+			name: '--removed-marker-background-color',
+			type: 'background-color',
+			required: false,
+			default: '#fff7ea',
+			description: 'Background color of the marker for removed lines'
+		}
+	];
+</script>
+
+<BorderedSection>
+	<SectionTitleText>Highlighted Component</SectionTitleText>
+	<h3>Svelte Properties</h3>
+	<PropertyList {properties} />
+	<h3>CSS Custom Properties</h3>
+	<PropertyList properties={cssProperties} />
+</BorderedSection>
+
+<style>
+	h3 {
+		margin-top: 24px;
+		font-size: 20px;
+		font-weight: bold;
+	}
+</style>
diff --git a/src/sample/components/propertyList/PropertyItem.svelte b/src/sample/components/propertyList/PropertyItem.svelte
new file mode 100644
index 0000000..1813f67
--- /dev/null
+++ b/src/sample/components/propertyList/PropertyItem.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { PropertyItem } from '$sample/components/propertyList/propertyItem.js';
+
+	export let item: PropertyItem;
+</script>
+
+<li class="property-item">
+	<h4 class="name" translate="no">{item.name}</h4>
+	<p class="attribute">
+		<span class="type" translate="no">{item.type}</span>
+		<span class="is-option">{item.required ? 'Required' : 'Optional'}</span>
+		{#if !item.required}
+			<span class="default" translate="no">default: {item.default}</span>
+		{/if}
+	</p>
+	<p class="description">{item.description}</p>
+</li>
+
+<style>
+	.property-item {
+		padding: 12px 0;
+		& > .name {
+			font-weight: bold;
+			font-size: 18px;
+			margin-bottom: 8px;
+		}
+		& > .attribute {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: flex-start;
+			font-size: 14px;
+			margin-bottom: 8px;
+			margin-left: 12px;
+			& > .type {
+				display: block;
+				padding: 0 8px;
+				width: fit-content;
+				font-weight: bold;
+				font-size: 14px;
+				color: white;
+				background-color: #b1b1b3;
+				border-radius: 5px;
+			}
+		}
+		& > .description {
+			font-size: 18px;
+			margin-left: 12px;
+		}
+	}
+</style>
diff --git a/src/sample/components/propertyList/PropertyList.svelte b/src/sample/components/propertyList/PropertyList.svelte
new file mode 100644
index 0000000..e36b309
--- /dev/null
+++ b/src/sample/components/propertyList/PropertyList.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { PropertyItem as Item } from '$sample/components/propertyList/propertyItem.js';
+	import PropertyItem from './PropertyItem.svelte';
+
+	export let properties: readonly Item[];
+</script>
+
+<ul class="property-list">
+	{#each properties as property}
+		<PropertyItem item={property} />
+	{/each}
+</ul>
+
+<style>
+	.property-list {
+		list-style: none;
+		padding: 0 24px;
+	}
+</style>
diff --git a/src/sample/components/propertyList/propertyItem.ts b/src/sample/components/propertyList/propertyItem.ts
new file mode 100644
index 0000000..c715da3
--- /dev/null
+++ b/src/sample/components/propertyList/propertyItem.ts
@@ -0,0 +1,14 @@
+export type PropertyItem =
+	| {
+			name: string;
+			type: string;
+			required: false;
+			default: string;
+			description: string;
+	  }
+	| {
+			name: string;
+			type: string;
+			required: true;
+			description: string;
+	  };
diff --git a/src/sample/header/Header.svelte b/src/sample/header/Header.svelte
index d984397..5405bf5 100644
--- a/src/sample/header/Header.svelte
+++ b/src/sample/header/Header.svelte
@@ -1,4 +1,4 @@
-<header>
+<header translate="no">
 	<h1>Svelte Diff Highlighting</h1>
 	<nav>
 		<a href="/">Docs</a>
diff --git a/src/sample/sections/syntaxHighlight/SyntaxHighlightSection.svelte b/src/sample/sections/syntaxHighlight/SyntaxHighlightSection.svelte
index 5f7cbfe..43b7553 100644
--- a/src/sample/sections/syntaxHighlight/SyntaxHighlightSection.svelte
+++ b/src/sample/sections/syntaxHighlight/SyntaxHighlightSection.svelte
@@ -17,7 +17,7 @@
 			<SectionTitleText>Syntax Highlight</SectionTitleText>
 		</div>
 		<form>
-			<select bind:value={selectedName}>
+			<select translate="no" bind:value={selectedName}>
 				{#each syntaxHighlightSamples as sample}
 					<option value={sample.lang.name}>{sample.lang.name}</option>
 				{/each}