organicCola's House

Pre

在iOS里你可以通过点击顶部状态栏来让页面滚动到顶部，但是似乎没有一个直接到达底部的触发方法。其实我们可以利用滚动条来变相实现。

Solution

如果在滑动屏幕时，趁右侧滑动条还没有消失，长按它，你就可以拖动它，这时候可以快速地在整个页面滑动，到达页面底部也就更容易了。

Pre

Hexo doesn’t support latex out of box, but some theme do.
Since I use next theme which support it, I don’t need additionally use other plugins to achieve the goal. But I still have to do some config to make it work better.

Steps

Enable the mathjax in next-theme config

1
2
3
4
5
6
7
8
9
10

// themes/next/_config.yml

 math:
 # Default (false) will load mathjax / katex script on demand.
 # That is it only render those page which has `mathjax: true` in front-matter.
 # If you set it to true, it will load mathjax / katex script EVERY PAGE.
 every_page: false
 mathjax:
   enable: true
   tags: ams

add the meta in the post file

if you didn’t set the every_page to true, then you have to set the metadata info mathjax: true in the disered post

1
2
3
4

---
title: the disered post
mathjax: true
---

Sample

Inline Formula

1

We all know that $1+1=2$

We all know that $1+1=2$

Display Formula

1
2
3
4

$$\begin{equation} \label{eq1}
e=mc^2
\end{equation}$$
The famous matter-energy equation $\eqref{eq1}$ proposed by Einstein...

$$\begin{equation} \label{eq1}
e=mc^2
\end{equation}$$
The famous matter-energy equation $\eqref{eq1}$ proposed by Einstein…

Some issues

The hexo default markdown render engine ‘marked’ will cause some issues when render the Multi-line Equations.
In latex,\\ will inset a new line in Multi-line Equations.
But in marked engine, the double backslash \\ will be escaped to \, which cause the render failure.

1
2
3
4
5
6
7

$$\begin{equation} \label{eq2}
\begin{aligned}
a &= b + c   \\
  &= d + e + f + g   \\
  &= h + i
\end{aligned}
\end{equation}$$

$$\begin{equation} \label{eq2}
\begin{aligned}
a &= b + c \
&= d + e + f + g \
&= h + i
\end{aligned}
\end{equation}$$

as you see, the Multi-line Equations $\eqref{eq2}$ didn’t display correctly
Fortunately, you have at least two options to fix it.

Simpler way: use different linebreak symbol

maually escape the backslash

A simple way to fix it is that use \\\\ to generate the escaped double backslash, and pass \\ to next-theme‘s mathjax engine correctly.

1
2
3
4
5
6
7

$$\begin{equation} \label{eqcorrect}
\begin{aligned}
a &= b + c   \\\\
  &= d + e + f + g   \\\\
  &= h + i
\end{aligned}
\end{equation}$$

$$\begin{equation} \label{eqcorrect}
\begin{aligned}
a &= b + c \\
&= d + e + f + g \\
&= h + i
\end{aligned}
\end{equation}$$

tips: but due to difference between other render engines, \\\\ may render as two linebreaks on it, such as marked engine inside the Obsidian.

use \newline

\newline works the same way as \\ in latex syntax, and since marked will not escape \newline, it’s more compatible between different markdown render engine.

1
2
3
4
5
6
7

$$\begin{equation} \label{eqcorrect2}
\begin{aligned}
a &= b + c   \newline
  &= d + e + f + g   \\\\
  &= h + i
\end{aligned}
\end{equation}$$

$$\begin{equation} \label{eqcorrect2}
\begin{aligned}
a &= b + c \newline
&= d + e + f + g \\
&= h + i
\end{aligned}
\end{equation}$$

Maybe harder way: Use other render engine

Alternately, you could use another markdown render engine. like pandoc which is recommended by the next-theme officially.

1
2

$ npm un hexo-renderer-marked
$ npm i hexo-renderer-pandoc

pros

It could render the math Formula correctly, no more ugly \\\\ thing, and the md content is basically standard, which makes it easier to edit or render with other editor or engine, like Emacs.

cons

cons_1. extra blank line

If you are familiar with the default marked flavor markdown, you could possibly need some modification with pandoc config. Pandoc won’t create newline when it comes with a single enter, you have to use the standard way: double space at the end of line
you could fix it with config in the hexo config.

1
2
3

pandoc:
  extensions:
    - "+hard_line_breaks"

However, it will bring another issue, this will cause pandoc insert extra <br> tags around the <span> tag which the math formula are wrapped in, blank around the formula will make it looks not so good.
at least two way to fix it as I know:

1. But you could solve it with by adding <br> tags or blanks line around the display formula.
2. modify the package source code to use a github flavor markdown

   1 2 3 4

   // node_modules/hexo-renderer-pandoc/index.js //var args = [ '-f', 'markdown-smart'+extensions, '-t', 'html-smart', math] var args = [ '-f', 'gfm'+extensions, '-t', 'html-smart', math]

cons_2. embed resources issues

• Another thing is that pandoc doesn’t support embed sources like pictures in local relative path out of box, maybe you could config it – I didn’t try that.

Appendix: More sample

Multiple Aligned Equations

1
2
3
4
5
6

$$\begin{align}
a &= b + c \label{eq4} \newline
x &= yz \label{eq5} \newline
l &= m - n \label{eq6}
\end{align}$$
There are three aligned equations: equation $\eqref{eq4}$, equation $\eqref{eq5}$ and equation $\eqref{eq6}$.

$$\begin{align}
a &= b + c \label{eq4} \newline
x &= yz \label{eq5} \newline
l &= m - n \label{eq6}
\end{align}$$
There are three aligned equations: equation $\eqref{eq4}$, equation $\eqref{eq5}$ and equation $\eqref{eq6}$.

Use \tag to Tag Equations

1
2

$$x+1\over\sqrt{1-x^2} \tag{i}\label{eq_tag}$$
Equation $\eqref{eq_tag}$ use `\tag{}` instead of automatic numbering.

$$x+1\over\sqrt{1-x^2} \tag{i}\label{eq_tag}$$
Equation $\eqref{eq_tag}$ use \tag{} instead of automatic numbering.

try <p>

When you use some Tex commands that can’t be recognized by markdown render engine, use wrap it with <p>, so that markdown render engine won’t process it, instead passing the raw content to the math equation render engine like MathJax, the math render engine usually can handle it.

1
2
3
4
5
6

<p>
$$ \begin{aligned}
ax^2+ &bx+c=0 \\
&\sideset {^{a_1}_{a_2}}{^{c_1}_{c_2}} \times
\end{aligned} $$
</p>

Pre

Getting bored for using the same terminal all the time, time to move on to another one.
This time will be Alacritty.
The first trouble is that Alacritty won’t treat Option as Meta, it just don’t provide you this option.
check the issues on its github repository, you’ll find something like the following:

1
2
3
4
5
6
7
8

key_bindings:
  - { key: H,        mods: Alt,     chars: "\x1bh"                       }
  - { key: I,        mods: Alt,     chars: "\x1bi"                       }
  - { key: J,        mods: Alt,     chars: "\x1bj"                       }
  - { key: K,        mods: Alt,     chars: "\x1bk"                       }
  - { key: L,        mods: Alt,     chars: "\x1bl"                       }
  - { key: M,        mods: Alt,     chars: "\x1bm"                       }
  - { key: N,        mods: Alt,     chars: "\x1bn"                       }

It almost cover everything.
Things semm perfect until I found Alt+i/u/e/n won’t work.

Issue

on MacOS in English input method option+n will prompt a “˜” symbol, and waiting for the next keystroke to see if it can input a char that can be modified by “˜”, which will break the keymap proceeding
and this keymap will never get chance to be execute:

1

# - { key: N,        mods: Alt,     chars: "\x1bn"                       }

Looking into the issues, didn’t find useful information, and it seems the author will do the “treat option as meta” later in the future.
So, what’s now?

Solution

Karabiner came to my mind. Karabiner, a cross-platform keymap tool.
Since the issue can’t be solved in Alacritty itself, I can only count on some tool outside of it.
if I can manage to avoid option-n keystroke and map it to a middle keybinding, then the “˜” won’t shown, then map this keyBinding to the desired chars code in the Alacritty.
fortunately Karabiner and Alacritty can do this for me.

flowchart TB;

A(Alt+n) x-.-x |option+n will prompt a symbol to break the proceeding| C

subgraph Karabiner
    A --> |map| B[Command+n] 
end
B --- B'
subgraph Alacritty
    B'[Command+n] --> |map| C("\ x1bn")
end

Karabiner will map left_option+n to left_command+n, so you don’t have to
literally press Command+n to trigger Meta+n, just do as the natural way
pressing the Alt+n, and karabiner and alacritty will ensure the Meta+n
trigger for you.

Step

Config is simple

1
2

# alacritty.yml
 - { key: N,        mods: Command,     chars: "\x1bn"                       }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# alacritty_karabiner.json
{
  "title": " Alacritty",
  "rules": [
    {
      "description": "Alacritty: alt+n send command+n",
      "manipulators": [
        {
          "type": "basic",
          "from": {
            "key_code": "n",
            "modifiers": {
              "mandatory": [
                "left_option"
              ],
              "optional": [
                "any"
              ]
            }
          },
          "to": [
            {
              "key_code": "n",
              "modifiers":[ 
                "left_command"
              ]
            }
          ],
          "conditions": [
            {
              "type": "frontmost_application_if",
              "bundle_identifiers": [
                "org.alacritty"
              ]
            }
          ]
        }
      ]
    }
  ]
}

上海话“一刚”:

在句末，有惊讶，感叹的意味。

“他竟然做出这样的事一刚”

日语“って”:

在跟在某人说的话句末时，有表示引用完毕的意思。

““これでいいです”って、彼はそう言った。”

两者的用法和位置非常相似～

Pre

希望能在复制和分享网页url时自动生成如下的形式的文本，以便于在markdown中插入。

1

[This is url title infomation](https://www.someurl.com)

• Shortcut: iOS上自带的快捷方式应用(前身是workflowy), 可以让你通过指令执行一些重复的动作从而完成目的。
• markdown: 是一种标记语言，可以理解为html的简化版本，经常被用于编写文档和文章，human-readable是它的特点。现在网络上支持非常广泛。
• [xxxx](www.xxx.com)是markdown中插入链接的语法，前面是显示的文本，后面贴的是具体的url。

Resource

获取快捷方式，点击下面地址加入快捷方式app中

richUrl2md

rawUrl2md

Config

将快捷方式加入app分享菜单中
进入快捷方式app，长按对应快捷方式快片 → Details → Show in Share Sheet

Usage

有两种使用方法，在app中使用，主动点击快捷方式进行触发。

在app中使用

richUrl2md

在bilibili的app中，点击分享 → 更多 → richUrl2md
此时你的剪切板中就得到了一个[This is url title infomation](https://www.someurl.com)格式的链接，粘贴到你的markdown文档中。
tip: this will result in a expanded shorten url

rawUrl2md

在浏览器里冲浪时，复制一段文字（通常是标题），这之后将作为链接的标题
在浏览器中点击分享按钮 → rawUrl2md

主动点击快捷方式进行触发

复制一段url。再点击快捷方式app中的rawUrl2md卡片。不过这样生成的就不带标题了，像这样[](www.ww.xxx.com)

Appendix

这只是两个简单的小功能，没什么技术含量。
其实iOS的快捷方式并不是什么新鲜玩意儿，桌面端有很多这样的脚本。只是受限于iOS的设备限制，目前在iOS上想要实现自动化这是最方便的，虽然它能力有限，但是从系统层面支持你进行一些操作和app间的互动，还是不错。

在两个输入法之间快速切换

• 如果你有多个输入法，想要在其中两个键盘之间来回切换的话，不需要长按小地球在列表中选择。
  在保证上一个刚刚使用过的输入法是你想要切换的那一个的条件下，点一下小地球就会切换回去，如果想要再切换回来就再点一下。

  注意 两次点击之间要稍微留点时间，否则会切换到之外的其他输入法，有点类似mac的输入法, 不过mac不是时间间隔而是按住Ctrl不放。
  实在等不及可以随便输入字符，这时候哪怕立刻点小地球也会安全的切换回去。

日本語入力

• 输入日语可以不用kana键盘而用romaji键盘（之前没注意到，还以为自带键盘只有kana没有romaji）

  kana是9宫格太难用了；romaji键盘是26全键盘，可以保持全键盘的盲打优势。

Annoying alt key and meta behave on different OS and applications.

GUI emacs on Windows:

alt works as meta key, didn’t do much test on msys2 or something.

ArchLinux tty:

alt can be recognised as meta key in some applications(like emacs), in some others it can’t.

MacOS

GUI emacs application: you use Command key as meta key, there is nothing to worry about.
iterm2: you can set the way terminal treat alt in preference, and the following is what it acts like.

Cygwin、Msys、MinGW、Msys2的区别与联系

近期在一台thinkpad上折腾win7, 起初是想用emacs, 发现需要一些linux上的工具链，结果发各种linux相关的环境Cygwin/Msys/MinGW/Msys2…

1. How-does-MSYS2-differ-from-Cygwin
2. msys2 = cygwin1.dll + pacman
3. cygwin = cygwin1.dll + setup.exe
4. mingw不依赖cygwin1.dll, 是原生方式实现了少量重要的GNU工具
5. msys2 = cygwin1.dll + pacman + mingw64/clang/ucart

diff table

emacs_on_win

1. General config

1.1 Create a HOME system environment variable.

1. set HOME variable c:/Users/username
   read the prepare steps first before installation
2. set symbolic link to * repository
   mklink /D .emacs.d d:*\emacs.d

1.2 download & install msys2

(the last version can run on win7)
https://repo.msys2.org/distrib/x86_64/
msys2-x86_64-20221028.exe
(you can install it in d:msys64)

1.3 update msys2

execute multiple times until the last status

1

pacman -Syu

1.4 install emacs

1
2

pacman -S emacs
pacman -S mingw-w64-x86_64-emacs

1.5 run emacs

tui
run emacs from Msys2-msys2
gui
run emacs from D:\*\msys64\mingw64\bin\emacs-28.2.exe
run emacs from Msys2-MinGW

1.6 install plugins

switch between emacs(cli) & emacs(gui) several times to run and install packages as many as possible
when stuck on some init-file config like (scroll-bar-mode -1),you can just comment it. it’s OK to do so, because we want to install asmany package, and the final aim is to use pdf-tools & org-noter

2. config pdf-tool& org-noter

2.1 install pdf-tool

run pdf-tool-install from emacs(gui)

2.2 eval pdf-tool & org-noter lisp code

open init-org from D:*\emacs.d\lisp\init-org.el

1. eval key-binding & use-package related lisp code
2. eval (require 'org-noter_modifer) to allow use custom org-noter function
3. config linum-mode
   before open an pdf, you have to turn linum-mode off. This could be done by adding a pdf-view-mode-hook hook, or you’ll stuck when try open pdf file.

2.3 open pdf & org-noter

D:\*\*.org
M-x execute org-noer

2.4 enjoy with pain

Writing your CV in markdown with your favourite text editor and convert it into PDF with a single pandoc command. All these could be done in a TUI environment, you could even finish it in a tty.

Pre

Writing CV may be annoying.
Pdf format is usually prefered, but many one prefer writing in markdown format, you have to convert format after writing.
If you use some online website tool then every time you have to open it, it hard to writing something on a web you have to switch between mouse and keyboard which is a disaster, and what’s worse it usually charges, or need VIP for some feature. If you use some software, you have to depend on its export ability to convert your file into specific format, and usually its export has limitation, hard to extend and not flexible enough.
Of course, writing in markdown and convert it into pdf can be achieved by many ways.
the most simple way is to write in some sofeware and use its feature to display browser, and the save it as a pdf using browser. or using some editor to export to pdf after writing.
What if you want it in some way that you can do all the thing in a tty, without opening any browser or open some desktop sofeware?
Well, you can use pandoc.

TL;DR

just use this
[Work] Using markdown & css to convert

pandoc - Swiss-army knife of markup format conversion

it’s a free and open-sourced cli tool.
it can convert files between many formats: markdown, html, latex, docx.
besides convertion you can custom the output format.
cli tool can be use with many other tool-chain which makes it could work very flexibly.

Environment

The following work is on a win7 pc, so I guess it will work on higher version windows as well. For mac and linux environment, you could even achive better results, because though this is done on win7, but the tool chain is from linux(throuh msys2).

Solution

1. Writing your CV in markdown with your favourite editor

   1

   vim CV.md

2. Just Use pandoc & wkhtmltopdf to do the convert.

   1	pandoc --pdf-engine=wkhtmltopdf -c media/davewhipp-print.css -o result.pdf index.md

here is the workflow

flowchart TB;
subgraph c[combination]
  direction TB;
  md(markdown)
  css
end
c -.-> |pandoc| html
html -.-> |wkhtmltopdf| pdf
c --> |using pandoc directly convert| pdf

Steps

1. on windows you have to config a linux-like environment, you could do it by installing Msys2.

• 1.1 download & install msys2
  (the last version can run on win7)
  https://repo.msys2.org/distrib/x86_64/
  msys2-x86_64-20221028.exe
• 1.2 update msys2
  enter msys2
  execute multiple times until the last status

  1	pacman -Syu

2. install pandoc

msys2 don’t have this package, so just download the executeable release package from github repository. then upzip it, put pandoc.exe into msys2 bin folder mingw64/usr/bin.

3. [NOT my choice] Using pdflatex/xelatex(from texlive package) to convert

at first I saw this https://kieranhealy.org/vita.pdf, and like its simpel academic curriculum vitae style and color scheme.
its source code counld be download here https://github.com/kjhealy/kjh-vita
but be careful since it’s based on a latex solution, it’s more complicated than the following markdown way.
according to its memo in kjh-vita.tex, it got some Requirments from his other repository, where is https://github.com/kjhealy/latex-custom-kjh. and I found it need some font when compiling it, which counld be solved by download or just use other font instead.

latex syntax is much more complex than markdown, though it has an elegant syntax and render it in a precise way, it’s also true to be less readable than markdown.
note that if you are not familiar with latex, then this is not a good way to do.
if the markdown file contains CJK character(like Chinese), the default pdflatex won’t satisfy you, you could usexelatex instead.
this way you may entercount lots of file missing ERROR, you could solve it by download the corresponding file.
but if you konw what your are doing it’s totally ok.

at first I tried use pandoc convert markdown to pdf directly through xelatex, and the Chinese character issue and highlight style issue should be taken care of, which is basically like the following:

1
2

pandoc -f markdown -o result.pdf --pdf-engine=xelatex -s -VCJKoptions=BoldFont="SimHei" -VCJKmainfont="SimSun" --highlight-style=zenburn -V colorlinks -H head.tex -t pdf resume.md
(head.tex is an head file to add head to the pdf file)

but then I found I can’t typeset the content precisely, since latex compelte its typesetting in a single latex file. so if you want using a latex way, you have to writing it in latex at the very beginnig.

the following is the steps to convert .tex file into a .pdf file.

• 3.1 texlive installation and install its depenency

1
2

pacman -S mingw-w64-x86_64-texlive-lang-chinese
pacman -S mingw-w64-x86_64-texlive-font-extra

…and other packages you may need.

• 3.2 downlaod tex template

1
2

cd ~/Desktop
git clone https://github.com/kjhealy/kjh-vita

• 3.3 patch kjh-vita template: copy the required file into kjh-vita folder

1
2
3
4
5

cd ~/Desktop
git clone https://github.com/kjhealy/latex-custom-kjh
cd latex-custom-kjh
cp needs-memoir/* ~/Desktop/kjh-vita/
cp needs-org-mode/* ~/Desktop/kjh-vita/

• 3.4 patch kjh-vita template: download vc bundle
  download vc bundle from https://ctan.org/pkg/vc
  unzip it, and read the vc-manual, copy the vc binary into kjh-vita folder.

1
2
3

cd vc/git-windows
run the `vc.bat` file and generate the `vc`
cp vc ~/Desktop/kjh-vita/

• 3.5 patch kjh-vita template: download the missing font
  here are some fonts I found need to be download:

  FontAwesome/Unit-Medium/Minion Pro/

• 3.6 tweak the source code
  after tried my best I installed some fonts, but still missing some, so I tewaked the source code, so the compilation could be done. actually after the modification the output pdf looks almost the same as original one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

diff --git a/kjh-vita.tex b/kjh-vita.tex
index 91ca293..28f1c1a 100644
--- a/kjh-vita.tex
+++ b/kjh-vita.tex
@@ -42,7 +42,7 @@

 \documentclass[11pt,article,oneside]{memoir}
 \usepackage{org-preamble-xelatex}
-\usepackage{fontawesome,url}
+\usepackage{fontawesome5,url}

 %%%------------------------------------------------------------------------
@@ -98,13 +98,13 @@
 \setsansfont[Mapping=tex-text,
        Ligatures={Common},
        Colour=AA0000]{Unit-Medium}
-\setmonofont[Mapping=tex-text,Scale=0.72]{PragmataPro}
+\setmonofont[Mapping=tex-text,Scale=0.72]{Unit-Medium}

 \newfontface\scheader[SmallCapsFont={Minion Pro},SmallCapsFeatures={Letters=SmallCaps}]{Minion Pro}

 \newfontface\addressblock[Mapping={tex-text},
        Numbers={OldStyle},
-       Ligatures={Common}]{Minion Pro Medium Caption}
+       Ligatures={Common}]{Minion Pro}

 %%%------------------------------------------------------------------------

• 3.7 Execute convert [latex → pdf]

As pandoc‘s tip, the convert should be done directly using latex endinge.

[WARNING] Unusual conversion: to convert a .tex file to PDF, you get better results by using pdflatex (or lualatex or xelatex) directly, try pdflatex kjh-vita.tex instead of
pandoc kjh-vita.tex -o result.pdf.

so just use xelatex to do do the job.

1
2

cd ~/Desktop/kjh-vita
xelatex kjh-vita.tex

then you’ll get a right formatted pdf file.

4. [Work] Using markdown & css to convert

fortunately I found a similar academic style CV
it use jekyll to render a html, and print it with browser's print funtion.
but we don’t have to do it that way, using its css file is enough for me.
now We can use css file to convert markdown into html as a intermedia to achieved goal.
Using pandoc default convert html to pdf will lose the css style even with -c/--css filename.css.
However with wkhtmltopdf, we can use -c/--css filename.css to use css.

• 4.1 install wkhtmltopdf

1

pacman -S mingw-w64-x86_64-wkhtmltopdf-git

• 4.2 download the css file.

  1 2	git clone https://github.com/elipapa/markdown-cv cd markdown-cv

• 4.3 convert

markdown → html (if you only want a html)

1	pandoc -s -c media/davewhipp-screen.css -o result.html index.md

markdown → pdf (directly convert markdown to pdf.)

1	pandoc -t html -c media/davewhipp-print.css -o result.pdf index.md

(-t --to html means to convert to html, but here with the result.pdf .pdf subfix pandoc will convert it into pdf.)

or

1	pandoc --pdf-engine=wkhtmltopdf -c media/davewhipp-print.css -o result.pdf index.md

(--pdf-engine tell pandoc to use wkhtmltopdf to convert.)

• 4.4 margin
  when you use pandoc to convert by wkhtmltopdf, it may set default margin to the pdf, if you don’t want that, use -V to set it.

  note that all margins need to be the same according to wkhtmltopdf’s munaul.

  1	pandoc -f markdown -t pdf --pdf-engine=wkhtmltopdf -c media/davewhipp-screen.css -o result.pdf index.md -V margin-left=10 -V margin-right=10 -V margin-top=10 -V margin-bottom=10

Appendix: use mkhtmltopdf alone [html → pdf]

as mentioned previous you can use a css file to make markdown file rendered into a prettier pdf file. What if you don’t have a desired css file?
fortunately, mkhtmltopdf is powerful, you could use it turn html to pdf directly(which is the statnard way to use it).This make it more flexible to turn you markdown file into pdf.

the reason you can see markdown rendered in a pretty way in some website(like github markdown preview) or markdown editor(like typora) is that the they have render-engine/code done it for you. the results could be different in differnt engine(which always happen). the pandoc has its own engine as well, but the rendering results cound be so plain and boring which is not we want. so what we need now is a html rendered in your flavor, and then let wkhtmltopdf to convert it to pdf.

it’s easy to download the html from the web, normally you just right-click and save the html file. then use wkhtmltopdf to do the convert.

1

wkhtmltopdf rendered.html result.pdf 

ok, normally it won’t look exactly the same with the original web, both rendered.html and result.pdf. but for me it’s ok, rendering issue is too complex and I don’t wanna dive into it. Besides you could do some tweaks throuh edit the html file and css file.

假名

日语中的假名，就相当于汉语中的拼音，大概长这样
こんにちは（你好）平假名，画风温和
不过也有长这样的
オーケー（OK）片假名，画风硬朗
上面这种叫平假名，下面的叫片假名。可以理解为英语中字母大小写的关系，它们可以表示相同的语义，不过使用的情境有些不同。一般情况下使用平假名，片假名大多用在音译舶来语中，或者一些特殊语义例如拟声词，或者作一些特殊强调，特殊名称等。

假名表

假名表由一个 5段x10行 的阵列组成，称为50音图。其实并不是真的正好有50个平假名。
五十音图(清音表)

读音

假名中根据读音的不同又可以细分为

• 清音
• 浊音
• 半浊音
• 拗音
  读音不同它们的写法也会发生变化，清音是基本读音，其他读音都是在此基础上进行变化

清音

上图是50个最基本的平假名，即清音
清音的读法在每个假名后的括号内有标注。其实观察一下不难发现，它们的读音很有规律，即每行的辅音拼上5个段的元音就形成了对应交叉处的假名读音，拼读方法法基本与汉语拼音类似，不过发音与汉语拼音中的稍有不同。

浊音

浊音不是每行都有，是固定的几个行
辅音变音规律大体为

浊音表

半浊音

只有一行
辅音变音规律为

半浊音表

拗音

有多段多行，规律为 清音表中 や行 和 与其余行 的拼合
变音规律为 行与段相拼 得到拗音。
书写变化为 や/ゆ/よ 跟在辅音后面，并进行缩写

拗音表

促音

特殊假名っ跟在其它假名后面组成促音，如さっき（刚才）。促音使前一个假名的读音突然停止，因此得名。

长音

有 い/う 两种，跟在假名后起拉长音的作用。如いいね（真好）。

拨音

ん 一般在词末尾，构成鼻音。

音节

语调/重音

日语中没有复杂的语调，只有轻重音。

Appendix

形变

日语中有用言和体言，体言写法不会发生变化，用言写法则有可能根据上下文写法会发生变化。
其中用言包括“动词”、“形容词”、“形容动词”，其中尤以动词的变化最为丰富，需要另起一篇来讲。由于其变化规律与五十音图联系紧密，所以想要搞懂形变掌握50音图是基础。

日语输入

系统都自带有日语输入法
有两种输入模式，

• 将假名映射到每个按键上，敲击一个键输入一个假名，需要对键位非常熟悉，优点是效率高。
• 使用罗马字拼写输入，输入缓慢，但是就像中文的拼音输入法一样，会读就会输入，适合需要尽快能够输入的场景，或轻度使用者。

  使用罗马字拼写输入的前提要对50音表比较熟悉，
  有些特殊的假名有固定的输入方法，比如

  \	入力	romaji
  拗音	きょう（今天）	kyou
  长音	いいね（真好）	iine
  长音片假名	オーケー（OK）	长音符号为键盘上的减号字符键
  拨音	ん	nn
  促音	さっき	sakki

By the way, vim 中可以Ctrl-k+罗马拼音直接输入假名，如Ctrl-kna な