Configure furigana support and exemplary use it in chapter one.

config/.vitepress/config.mts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress'
+import furigana from 'furigana-markdown-it'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -11,6 +12,9 @@ export default defineConfig({
     image: {
       // image lazy loading is disabled by default
       lazyLoading: true
+    },
+    config: (md) => {
+      md.use(furigana())
     }
   },
   head: [

config/.vitepress/theme/custom.css

@@ -1,4 +1,12 @@
 :root {
     --vp-font-family-base: 'Chinese Quotes', 'Inter var', 'Inter', 'Noto Sans JP', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', 'Noto Sans JP',monospace;
-  }
+
+    .vp-doc :not(pre) > code ruby > rt {
+        margin-bottom: 3px;
+        border-radius: 4px;
+        padding: 2px 4px;
+        background-color: var(--vp-code-bg);
+        transition: color .25s, background-color .5s;
+    }
+}

config/docs/1-the-basic-types-of-sentences.md

@@ -20,31 +20,31 @@ In Japanese, if we want to say <code>Sakura walks</code> (A does B: Sakura walks
 
 ![](media/image1055.webp)
 
-Walk in Japanese is <code>あるく</code>. We need one more thing to make the core Japanese sentence, and **that is the linchpin of every sentence, が** (ga). 
+Walk in Japanese is <code>あるく</code>. We need one more thing to make the core Japanese sentence, and **that is the linchpin of every sentence, が** (ga).
 
 **が is the center of Japanese grammar. Every Japanese sentence revolves around が. In some sentences we're not going to be able to see the が, but it's always there, and it's always doing the same job. It links together A and B and turns them into a sentence.** So, our core <code>A does B</code> sentence is <code>**さくらが**あるく</code> = <code>**Sakura** walks</code>.
 
 ## Copula sentences
 
-Now let's take an A is B sentence: <code>Sakura is Japanese</code>, or, as we say, <code>Sakura is a Japanese person</code>. So, A again is Sakura, B is にほんじん/日本人, which means Japanese person, and **once again we need が to link them together. So we're going to picture the A car, the main carriage, with a が on it, because the main carriage, the subject of the sentence, always carries a が, to link it to the engine.**
+Now let's take an A is B sentence: <code>Sakura is Japanese</code>, or, as we say, <code>Sakura is a Japanese person</code>. So, A again is Sakura, B is [日本人]{にほんじん}, which means Japanese person, and **once again we need が to link them together. So we're going to picture the A car, the main carriage, with a が on it, because the main carriage, the subject of the sentence, always carries a が, to link it to the engine.**
 
-So, さくらが日本人 – and we need one more thing. There's one other thing that I want you to make friends with, and that's だ (da). <code>さくらが日本人だ</code> = <code>Sakura is a Japanese person</code>.
+So, さくらが[日本人]{にほんじん} – and we need one more thing. There's one other thing that I want you to make friends with, and that's だ (da). <code>さくらが[日本人]{にほんじん}だ</code> = <code>Sakura is a Japanese person</code>.
 
 ![](media/image632.webp)
 
 Now, you may have met this だ in its fancy form, です, but there are very good reasons for learning the plain, simple form first. So we're going to learn だ. Now if you look at だ, it's like an equals sign boxed off to the left. And this is a perfect mnemonic for what it does, because **だ tells us that A is B.**
 
-Why is it boxed off to the left? Because it only works one way. Think about this logically: さくらが日本人だ means <code>Sakura = Japanese person.</code> But it doesn't work the other way: Japanese people are Sakura – they're not all Sakura. Sakura is a Japanese person, but a Japanese person is not necessarily Sakura.
+Why is it boxed off to the left? Because it only works one way. Think about this logically: さくらが[日本人]{にほんじん}だ means <code>Sakura = Japanese person.</code> But it doesn't work the other way: Japanese people are Sakura – they're not all Sakura. Sakura is a Japanese person, but a Japanese person is not necessarily Sakura.
 
 ## Adjective sentences
 
 So now we have an <code>A is B</code> sentence and an <code>A does B</code> sentence. There is one more form of the Japanese core sentence, for it has three forms. The third form is when we have a describing word, an adjective.
 
-**In Japanese, describing words end with い** (i), just as they often do in English: happy, sunny, cloudy, silly. In Japanese it's just the same: happy – うれしい/嬉しい; sad – かなしい/悲しい; blue – あおい/青い.
+**In Japanese, describing words end with い** (i), just as they often do in English: happy, sunny, cloudy, silly. In Japanese it's just the same: happy – [嬉]{うれ}しい; sad – [悲]{かな}しい; blue – [青]{あお}い.
 
-Now, we don't have to learn all these, but we do need to know about Japanese adjectives ending in い because they make the third kind of sentence. So let's take an easy one: ペン (that's a nice easy word because it means pen) – <code>ペンが赤い/あかい</code> = <code>pen is red</code>.
+Now, we don't have to learn all these, but we do need to know about Japanese adjectives ending in い because they make the third kind of sentence. So let's take an easy one: ペン (that's a nice easy word because it means pen) – <code>ペンが[赤]{あか}い</code> = <code>pen is red</code>.
 
-Now, you notice that we don't have a だ on this sentence. Why is that? **Because the い-adjective あかい/赤い (red) – it doesn't mean red, it means is-red. The だ function, the equals function, is built into those い-adjectives.**
+Now, you notice that we don't have a だ on this sentence. Why is that? **Because the い-adjective [赤]{あか}い (red) – it doesn't mean red, it means is-red. The だ function, the equals function, is built into those い-adjectives.**
 
 ![](media/image557.webp)
 

config/docs/2-the-invisible-carriage-and-the-を-particle.md

@@ -54,7 +54,7 @@ We can say that <code>I</code> is the default value of the zero pronoun, the inv
 
 ![](media/image617.webp)
 
-If I say, <code>土曜日だ</code> (土曜日/どようび means Saturday), I'm saying <code>(It) is Saturday</code>. What's <code>it</code>? Today is. All these sentences are full, complete Japanese sentences, with a が-marked subject/ A carriage/main carriage, and an engine.
+If I say, <code>[土曜日]{どようび}だ</code> ([土曜日]{どようび} means Saturday), I'm saying <code>(It) is Saturday</code>. What's <code>it</code>? Today is. All these sentences are full, complete Japanese sentences, with a が-marked subject/A carriage/main carriage, and an engine.
 
 ![](media/image490.webp)
 
@@ -66,18 +66,18 @@ So the を car looks like this, and as you see, it's white. It's white because i
 
 ![](media/image77.webp)
 
-So let's take a sentence here: <code>わたしがケーキを食べる</code>. This means <code>I eat cake</code>.
+So let's take a sentence here: <code>わたしがケーキを[食]{た}べる</code>. This means <code>I eat cake</code>.
 
 ![](media/image146.webp)
 
 Now, the core sentence here is <code>I eat</code>. Those are the two black carriages. The white carriage, <code>ケーキを</code>, is telling us more about the engine. The core sentence is <code>I eat</code> and <code>ケーキを</code> is telling us what it is that I eat.
 
-Now, the interesting thing here is that we may often see this said like this: <code>ケーキをたべる</code>. And you already know what's going on when this happens. This is another case where we have the invisible A car.
+Now, the interesting thing here is that we may often see this said like this: <code>ケーキを[食]{た}べる</code>. And you already know what's going on when this happens. This is another case where we have the invisible A car.
 
 ![](media/image280.webp)
 
-**We can't have a sentence without a が. We can't have an action being done without a doer.** If we say <code>ケーキをたべる</code>, what we're really saying is <code>(zeroが)ケーキをたべる</code>. And the default value for <code>zero</code>, for the invisible carriage, is <code>わたし</code>. So usually this is going to be <code>I eat cake</code>, although if you were talking about someone else at the time, it might mean that that person eats cake.
+**We can't have a sentence without a が. We can't have an action being done without a doer.** If we say <code>ケーキを[食]{た}べる</code>, what we're really saying is <code>(zeroが)ケーキを[食]{た}べる</code>. And the default value for <code>zero</code>, for the invisible carriage, is <code>[私]{わたし}</code>. So usually this is going to be <code>I eat cake</code>, although if you were talking about someone else at the time, it might mean that that person eats cake.
 
 ::: info
-Just in case - as can be seen from from the pictures, every particle attaches to/assigns itself to the word BEFORE it, Not after it.
+Just in case - as can be seen from the pictures, every particle attaches to/assigns itself to the word BEFORE it, Not after it.
 :::

config/docs/22-ては-ても.md

@@ -18,7 +18,7 @@ Japanese is quite a noun-centered language, because all the words that come in f
 ![](media/image678.webp)
 
 **But fundamentally they're nouns.** So it's always a good guess when you don't know what a word is, that it's quite likely to be a noun. <code>空っぽ</code> is a noun, <code>empty</code>.
-<code>でも, びんは**空っぽ**だった</code> – <code>However, the jar was **empty**</code>.
+<code>でも, びんは<b>[空]{から}っぽ</b>だった</code> – <code>However, the jar was **empty**</code>.
 <code>アリスは空っぽのびんでも下へ落としては悪いと思った.</code>
 Here again, we're going to see some other uses of the て-form.
 

config/docs/3-the-は-particle.md

@@ -4,7 +4,7 @@
 
 こんにちは。
 
-Welcome to Lesson 3. Some of you who have done some Japanese already may be wondering how I've managed to get through two entire lessons without using or even mentioning the は *(always read as wa)* particle. I'm well aware that most courses start you on は from the beginning. <code>わたしはアメリカ人だ</code> <code>ペンはあおい.</code> And this is really a very very bad idea because it leaves you completely unclear about what the particles really do and about the logical structure of sentences.
+Welcome to Lesson 3. Some of you who have done some Japanese already may be wondering how I've managed to get through two entire lessons without using or even mentioning the は *(always read as wa)* particle. I'm well aware that most courses start you on は from the beginning. <code>わたしはアメリカ[人]{じん}だ.</code> <code>ペンはあおい.</code> And this is really a very, very bad idea because it leaves you completely unclear about what the particles really do and about the logical structure of sentences.
 
 However, we're now ready to look at the は particle and find out what it does and, just as important, what it doesn't do. **The は particle can never be a part of the core sentence. It can never be one of the black carriages**, **the main car A** (the thing we are saying something about) **or the engine B** (the thing we are saying about it).
 
@@ -22,25 +22,25 @@ So if は is not a black car or a white car, what kind of a carriage is it? Well
 
 That's right, it's a flag. Why do we depict it as a flag? Because that is what は does. **It flags something as the topic of the sentence. It doesn't say anything about it. That's what the logical sentence is there for. Wa simply flags the topic.**
 
-Now, some of the textbooks will tell you that a sentence like <code>わたしはアメリカ人だ</code> literally means <code>As for me, I am an American</code>, and that is exactly correct. If they would stick with that logic and carry it through, we wouldn't have the trouble we have.
+Now, some of the textbooks will tell you that a sentence like <code>わたしはアメリカ[人]{じん}だ</code> literally means <code>As for me, I am an American</code>, and that is exactly correct. If they would stick with that logic and carry it through, we wouldn't have the trouble we have.
 
-So, <code>わたし/私は</code> means <code>as for me</code>. <code>アメリカ人だ</code> means <code>=American</code> or <code>am American</code>. So as you see, with a sentence like this something is missing, both from the Japanese and the English. We can't say <code>as for me, am American</code>. Neither can we have a sentence without an A car, without a が-marked doer. So if we put the A car in, it makes sense in both English and Japanese.
+So, <code>[私]{わたし}は</code> means <code>as for me</code>. <code>アメリカ[人]{じん}だ</code> means <code>= American</code> or <code>am American</code>. So as you see, with a sentence like this something is missing, both from the Japanese and the English. We can't say <code>as for me, am American</code>. Neither can we have a sentence without an A car, without a が-marked doer. So if we put the A car in, it makes sense in both English and Japanese.
 
 ![](media/image487.webp)
 
-<code>私は(**zeroが)**アメリカ人だ</code> – <code>As for me, (**I)** am an American.</code>
+<code>[私]{わたし}は<b>(zeroが)</b>アメリカ[人]{じん}だ</code> – <code>As for me, (**I**) am an American.</code>
 
-Now, some of you may be saying, "Isn't it over-complicated? Can't we just pretend that **わたしは** is the main car of the sentence?" And the answer to that is <code>**No**</code>. Because although it works in this case and some other cases, it doesn't work in every case and that is why we really mustn't do it.
+Now, some of you may be saying, "Isn't it over-complicated? Can't we just pretend that **[私]{わたし}は** is the main car of the sentence?" And the answer to that is <code>**No**</code>. Because although it works in this case and some other cases, it doesn't work in every case and that is why we really must not do it.
 
-Let's take an example. There's an old joke among Japanese learners and it's only possible because of how badly Japanese is taught. The joke is: A group of people are dining in a restaurant and they're discussing what they're going to eat, and somebody says, <code>わたしはうなぎだ</code>. Unagi/うなぎ means eel, so the joke is that this person has literally said, <code>I am an eel</code>.
+Let's take an example. There's an old joke among Japanese learners, and it's only possible because of how badly Japanese is taught. The joke is: A group of people are dining in a restaurant, and they're discussing what they're going to eat, and somebody says, <code>[私]{わたし}はうなぎだ</code>. Unagi/うなぎ means eel, so the joke is that this person has literally said, <code>I am an eel</code>.
 
-After all, if <code>わたしはアメリカ人だ</code> means <code>I am an American</code>, then <code>わたしはうなぎだ</code> must mean <code>I am an eel</code>. That's absolutely perfect logic – **except that <code>わたしはアメリカ人だ</code> doesn't mean <code>I am an American</code>. It means <code>As for me, I am an American</code>.**
+After all, if <code>[私]{わたし}はアメリカ[人]{じん}だ</code> means <code>I am an American</code>, then <code>[私]{わたし}はうなぎだ</code> must mean <code>I am an eel</code>. That's absolutely perfect logic – **except that <code>[私]{わたし}はアメリカ[人]{じん}だ</code> doesn't mean <code>I am an American</code>. It means <code>As for me, I am an American</code>.**
 
-As we know, the default value of the invisible car, the zero pronoun, is <code>私/わたし</code>, but that isn't its only value. Its value depends on context.
+As we know, the default value of the invisible car, the zero pronoun, is <code>[私]{わたし}</code>, but that isn't its only value. Its value depends on context.
 
 ---
 
-In <code>わたしはアメリカ人だ</code> (<code>As for me, I am an American</code>) the value of the zero pronoun is indeed <code>私/わたし</code>. But in <code>わたしはうなぎだ</code>, which is <code>わたしは(**zeroが)**うなぎだ</code>, zero is not <code>私</code>. Zero is <code>it</code>. <code>It</code> is the thing we are talking about, the subject of the conversation: what we are eating for dinner.
+In <code>[私]{わたし}はアメリカ[人]{じん}だ</code> (<code>As for me, I am an American</code>) the value of the zero pronoun is indeed <code>[私]{わたし}</code>. But in <code>[私]{わたし}はうなぎだ</code>, which is <code>[私]{わたし}は(**zeroが**)うなぎだ</code>, zero is not <code>[私]{わたし}</code>. Zero is <code>it</code>. <code>It</code> is the thing we are talking about, the subject of the conversation: what we are eating for dinner.
 
 ![](media/image377.webp)
 
@@ -50,13 +50,13 @@ The car we're going to introduce today is a white car, and this is the に (ni)
 
 ![](media/image338.webp)
 
-But let's take this を sentence: <code>わたしがボールをなげる</code>
+But let's take this を sentence: <code>[私]{わたし}がボールをなげる</code>
 
-ボール is ball and なげる means throw. So this is, <code>I throw a ball</code>. The core sentence is <code>I throw</code> – <code>わたしがなげる</code>, and the white car tells us what I threw: it was a ball.
+ボール is ball and なげる means throw. So this is, <code>I throw a ball</code>. The core sentence is <code>I throw</code> – <code>[私]{わたし}がなげる</code>, and the white car tells us what I threw: it was a ball.
 
 ![](media/image299.webp)
 
-Now, if we say, <code>わたしがボールをさくらになげる</code>, this means <code>I throw a ball at Sakura</code> (or <code>to Sakura</code>). **Sakura is the destination, the target, of my throwing.**
+Now, if we say, <code>[私]{わたし}がボールをさくらになげる</code>, this means <code>I throw a ball at Sakura</code> (or <code>to Sakura</code>). **Sakura is the destination, the target, of my throwing.**
 
 ![](media/image901.webp)
 
@@ -66,15 +66,15 @@ So if I say, <code>わたしにさくらがボールをなげる</code>, I'm say
 
 ![](media/image165.webp)
 
-If I say, <code>ボールがわたしにさくらをなげる</code>, I'm saying, <code>The ball throws Sakura at me</code>. It doesn't make any sense, but we might want to say it in a fantasy novel or something.
+If I say, <code>ボールが[私]{わたし}にさくらをなげる</code>, I'm saying, <code>The ball throws Sakura at me</code>. It doesn't make any sense, but we might want to say it in a fantasy novel or something.
 
 ![](media/image864.webp)
 
-**We can say whatever we like in Japanese so long as we have the logic of the particles correct.** But now let's introduce は into this sentence: <code>わたし**は**さくらにボールをなげる.</code> This is <code>わたし**は**(zeroが)さくらにボールをなげる</code>. As we know, what it means is <code>As for me, I throw the ball at Sakura</code>.
+**We can say whatever we like in Japanese so long as we have the logic of the particles correct.** But now let's introduce は into this sentence: <code>[私]{わたし}**は**さくらにボールをなげる.</code> This is <code>[私]{わたし}**は**(zeroが)さくらにボールをなげる</code>. As we know what it means is <code>As for me, I throw the ball at Sakura</code>.
 
 ![](media/image106.webp)
 
-Now let's give the は to the ball: <code>ボールは私がさくらに**(zeroを)**なげる</code>. What we are saying now is <code>As for the ball, I throw it at Sakura</code>.
+Now let's give the は to the ball: <code>ボールは[私]{わたし}がさくらに<b>(zeroを)</b>なげる</code>. What we are saying now is <code>As for the ball, I throw it at Sakura</code>.
 
 ![](media/image877.webp)