抄了個在線吉他譜編輯器

這個項目實際上是去年期末考複習的時候寫的，由於實在不想複習因此無聊參照 有譜麼 用 React 寫的一個在線吉他譜編輯器。我還將項目裏的和絃組件和歌詞組件提取出來放在 npm 上。

Github 在這裏

當時就以爲這個網站很不錯，玩過吉他的人都知道每次搜吉他譜的時候總會出現譜子要麼是 JPG，要麼是 PNG，字體大小不樣的問題。雖然問題不是很大，可是就是很難看，而這個網站完美解決了這個問題。

它的渲染吉他譜的思路其實和 Markdown 以及 LaTex 有點像的。不過我寫的在線編輯器可能性能比不上他的，由於每次修改都會從新渲染組件。若是要改進這個方面可能還得看看編譯原理才能知道在哪些地方能夠提升性能。

和絃組件

Github 在這裏

這個和絃組件是用 React 渲染 SVG 來完成的。我稍微看了下「有譜麼」的實現，可能他的更人性化一些，而個人能夠高度定製。好比能夠自定義和絃。

<Chord chordName="F"/>
複製代碼

歌詞組件

Github 在這裏

歌詞組件只不過是對和絃組件的再次封裝，只要將和絃組件作個定位就行了，

<Lyrics isEmbedChord={true}>
    [F] Good morning!
</Lyrics>
複製代碼

最後

最近想回顧一下這個項目，原本想試試能不能寫一個 Webpack Loader 將文字渲染成 HTML 或者 SVG（也就是右邊的樣式），也算是一個鍛鍊吧。