Adding ruby characters by Markdown
17 November, 2019 - 2 min read
Many markdown decoration is supported by existing parsers, but most of them are for English and not considering local languages like Japanese.
I was looking for a markdown parser that can express ruby characters, but I couldn't find any.
So I decided to implement a markdown parser from scratch 💪
This is my work --
And this blog post is also decorated using this parser 🤗
What does it look like?
Here's a simple guide to use my parser. import my library, and let it read
1
rb(日本語|ニホンゴ)
and it will translate the text to
日本語
This markdown can be used for longer sentences for example
1
rb(親譲り|オヤユズリ)のrb(無鉄砲|ムテッポウ)でrb(子供|コドモ)のrb(時|トキ)からrb(損|ソン)ばかりしている
will give you
親譲り
の
無鉄砲
で
子供
の
時
から
損
ばかりしている
How to use this library?
This is built as NPM component which translate text to React JSX format and you can import with ES6.
1
2
3
import TextToJSX from '@3yaa3yaa/markdown-converter'
let ttj=new TextToJSX("rb(親譲り|オヤユズリ)のrb(無鉄砲|ムテッポウ)でrb(子供|コドモ)のrb(時|トキ)からrb(損|ソン)ばかりしている");
doSomething(ttj.GetJSX())
This will return the result above in your console.
What's next?
Above parser works fine, but is still hard to input bracket and pipe characters for each vocabulary.
I want to add these ruby characters
automatically
.
To achieve that, I'm thinking to utilize Kuromoji.
In fact, I've already written some code to achieve this using Promise.
1
2
3
4
let ttj=new TextToJSX("親譲りの無鉄砲で子どもの時から損ばかりしている)");
ttj.FillReadingsFromDictionary().then(()=> {
doSomething(ttj.GetJSX());
};
will give you the same result.
It doesn't have any exception handling, so I want to improve the quality.