# 開発日記-2024-01-18 / rehype-sanitizeの挙動について

## rehype-sanitizeの挙動について

- [remarkRehype](https://github.com/remarkjs/remark-rehype)
- [rehypeSanitize](https://github.com/rehypejs/rehype-sanitize)

この二つのプラグインを同時に使うと注釈のリンクがおかしくなる。先頭に余計`user-content`がついてしまう。

```markdown:注釈のマークダウン
テキスト[^1]
[^1]: 注釈内容
```

## kconvのutf8エンコード

元々UTF-8の文字列に `string.toutf8` すると記号が文字化けしてしまう場合がある。

```ruby
require 'kconv'

def to_utf8(value)
  value.is_utf8? ? value : value.toutf8
end
```

## ダークモード切り替えボタンのアイコンはどれが正解？

1. [MUI: The React component library you always wanted](https://mui.com/)  
   ボタンを押すとライト、ダークが切り替わる。ボタンのアイコンは現在の設定の逆になる（ダークモードの場合は太陽）。
2. [React Bootstrap | React Bootstrap](https://react-bootstrap.github.io/)  
   ボタンを押すとライト、ダークが切り替わる。ボタンのアイコンは現在の設定になる（ダークモードの場合は月）。
3. [Yamada UI - A UI component library unleashing the power of styling, animation, and flexibility in React applications. - Yamada UI](https://yamada-ui.com/)  
   ボタンを押すとドロップダウンが表示される。ライト、ダーク、システムから選べる。ボタンのアイコンは現在の設定の逆になる（ダークモードの場合は太陽）。
4. [shadcn/ui](https://ui.shadcn.com/)  
   ボタンを押すとドロップダウンが表示される。ライト、ダーク、システムから選べる。ボタンのアイコンは現在の設定になる（ダークモードの場合は月）。

このパターンの場合、どれが直感的にわかりやすいのだろう。

## 記事の内部リンクを検索する正規表現

`!*\[.+\]\((?!http).+\)`