もやぶろ

moyashidaisukeのブログだからもやぶろ。フリーランスのエンジニアのダイスケです。プログラム関連とかギター関連とか旅行関連とか色々。

【vue】Vue Styleguidistの使い方を説明⑤ 〜アンダーバーが勝手に省略される挙動対策〜

概要

Vue Styleguidistで、アンダーバーつなぎの文字を書くと、勝手にアンダーバー「_」が省略される挙動の対策です。(多分ReactのStyleguidistでも発生する)

「HOGE_HOGE_HOGE」 -> 「HOGEHOGEHOGE」になります。

今までの

www.moyashidaisuke.com

www.moyashidaisuke.com

www.moyashidaisuke.com

www.moyashidaisuke.com

どこのこと?何がダメなの?

こんな感じでかくと

/**
 * HOGE_HOGE_HOGEです <br>
 * PIYO_PIYOです <br>
 */
export default {

}

こうなります

f:id:moyashidaisuke:20191031232138p:plain

何が起きているの?

アンダーバーで文字列を囲むと、italicになってしまうようです、、、

よくみると、

HOGEHOGEHOGE

となっていますね、、、

対応方法

「`」 バッククオートで囲みます。


/**
 * `HOGE_HOGE_HOGE`です <br>
 * PIYO_PIYOです <br>
 */
export default {

}

f:id:moyashidaisuke:20191031233113p:plain

できました。codeタグで囲まれちゃうので、余計なスペースついちゃいますが、、、うーん、、、😇

マニュアル

相変わらずわかりにくいですけど、exampleにしれっと書いてありました。

vue-styleguidist.github.io

https://raw.githubusercontent.com/vue-styleguidist/vue-styleguidist/dev/examples/sections/docs/One.md

Text attributes: italic, bold, monospace.

だそうです。

さがしてみたけど明示的にアンダーバーをエスケープする方法は見つけられず。うーん