別に必要な機能ではないのですが、htmlモードで書いていればそれほど面倒ではないものの、いざ編集モードからhtmlモードへと切り替えたりなんとかしてるのは結構面倒くさいものです。

そんなわけで作ってみた次第です。

タグについて

タグと言っても別途そういうのを集めてラベルとして使うのではなく、単純にbloggerのサーチ機能のクエリ(キーワード)として、使ってみる感じではあるのですが、どうやってタグ化するべきかを色々考えてみて、X(Twitter)風にしてみようかと思いました。
しかしどうしてもここで終わりと言う終了の正規表現がわからず、とりあえずだいたいで作ってみました。

わからないというのは、Twitterのタグとかを見ていると、タグに「含まれるもの含まれないもの」があるようなんですが、先頭は#が来るとして終わりには何かしら約物(括弧とか)は含まなかったりその文字でリンクが切れるものってありますよね。それが何かわからないのです。

それこそ括弧の中身を取得すべく、その括弧の種類が何か決まっているなら書きようもあるわけですが、どうやらユニコードでどれとこれみたいのが設定してあるようで\wとかで拾えたり拾えなかったり。こういう時に扱う文字数が多い言語っていうのはなかなか大変ですよね。

  1. #機能テスト
    • リストの中で単体であれば前後にスペースは必要ありません
  2. #機能テスト
    • リストの中で単体である時、前にだけスペースを入れた例
  3. #機能テスト
    • リストの中で単体である時、後にだけスペースを入れた例
  4. #機能テスト
    • リストの中で単体である時、前後にスペースを入れた例
  5. ＃機能テスト
    • リストの中で単体である時、#を全角にした場合
  6. #機能テストと続く文字
    • リストの中で#に続く文章だと最後までタグになってしまいます
      この文章のようにタグ化したくない部分には.noCheckを追加します
  7. #機能テスト と続く文字
    • リストの中で#キーワードの後にスペースを入れた文章は機能します

今現在(2023/05/16)では、まだcssにスタイルしてないので、単順に#リンク となっているだけですが、仮に入れました #もspanで囲んであるので色を付けたり装飾することができます。

で、お気づきのように、↑の段落の#は(ここもですが)リンク化されていません。#リンクの後に無理に半角のスペースを開けたりしたり、「#もspanで…ことができます。」までと書いてみまして、タグ化されそうなものですがそうはなりません。
これは段落であるpに.noCheckと言うクラスを付けてます。そうするとその部分は無視しますので、ここらは面倒くさいところですがまぁしょうがない感じで。

これは忘れないように、段落に文字を書き終わって、ここはリンク貼られると嫌だなというところはクラスを入れて下さい。ちなみにpに.noCheckを入れると、その後も文章を書き進んでいけば続けて次の段落にも.noCheckが入るので、Bloggerの便利な所と言えばそうですが、確認して必要のない段落ではnoCheckが入っていたら外す必要があります。

color: #ffffff; //この文は<pre>の中に書かれています

color: #ffffff; //この文は<p>の中に書かれています

CSSとかを記事内のテキストとして「color:なんちゃら」 と書く場合に、#xxxなどと#を使用するため値の部分がタグ化されてしまいます。そのためここで終わりという目印の半角スペースを開けないと、文末までがタグ化されてしまう事もあり、それも気をつけて下さい。

また自動リンク・タグ化される適用範囲ですが、このテンプレートの場合は.post-content pと.post-content :is(ol,ul)なっていますので、それ以外の箇所は自動リンク・タグ化されることはありません。

自動リンクについて

リンクは普通のリンクです。ここはもう少し考えねばならないこともありますが、今の所、記事中にいちいち、<a hef="....>テキスト</a>とか書くのが面倒なので、コピーしたアドレスを記事を書く時に直接貼っとけばいいやんと言う事から実装してあります。 

https://tver.jp/ //この文はただのテキストです

https://tver.jp/ //この文はただのテキストに.noCheckを入れてあります

https://tver.jp/ //この文はただのテキストの<p>です

http://, https://から始まるテキストを自動でリンクにします。また記事を書くブログのホストネームと貼り付けたアドレスのホストネームを比較して、異なる場合はtarget="_blank"も入れるようにしてあります。
target="_blank"が入るとリンクの後ろにアイコンが付くようになっています。このアイコンがないものは通常のリンクと同様、今見ているタグで遷移します。

リンク自体はBloggerの機能からリンクを張った方が楽かもしれませんが書いておけばリンクになるので、参考にしたいページのアドレスをブラウザでコピーして、そのままテキストでペーストしておけばよいので手を加える必要もなく便利かと思います。
ただしurlが正しい形式になっているかのチェックはしていないので注意はしてください。

全体的には

こんな感じになっています。

See the Pen Untitled by Hidekichi (@Hidekichi) on CodePen.

案外、しょうもない機能でも色々と面倒そうなスクリプトになってますがやってることは単純なことです。コードを作っている時よりも正規表現をチェックしている時の方が圧倒的に時間がかかってます。むしろそっちメインかと。