[info red]2023/06/06 赤を追加しました。
2023/06/10 青を追加しました
詳細は一番下に[/info]

一定のタグで任意のテキストを装飾する

機能を追加変換機能に項目追加テスト

注意書きを書くとした時に、htmlモードに変えて<div class='....>何かしらのインフォメーション....とか書くのって案外面倒くさいですよね。
だったらついでに書いて出力したら変換されると素敵やんと。そういうテストです。

書き方としては次のような感じです。

<p>
  [info]何かしらのテキスト[/info]
</p>

まずは機能のテストなのでできるかどうかを確かめてみて、もしできるようであれば、[infoの後に、色とか任意のクラスが追加できると良いなぁと。できるようにしました。

[info]他のclassとかはまだ実装してませんが、もしするとすると正規表現が面倒臭い感じになるかとできるようにしました[/info]

このような感じになります。

通常はpタグの中に書くが書かなかった場合はどうなるか

通常のタグで囲まないテキストはdisplay: grid;のレイアウトなのでおかしな事になってしまいます。
そもそもがこのコンテンツエリアの中のpタグに対して処理を行っているので、pタグは必須になります。

もしpタグで書かなかった場合はレイアウト崩れの原因になるのでpタグを用いて、例えば大きく表示したい場合は、コンテンツ幅をpタグにclassで追加して変更して目立たせるというのも良いかと思います。

機能テスト .post-content のレイアウト

infoの中に通常のhtmlタグを入れたらどうなるか

[info]僕は常々思ってるんですが、最近のテレビは薄型・軽量になってきたので壁にかけることができると思います。
壁にかけられるのであれば回転できる受けデバイスを壁に取り付け、そこにテレビをかけて、
・テレビを見る時は横向き
・縦向きにしてインターネットを見れてタッチ操作もできるように
・普段はフォトフレームとして縦でも横でも好きな絵画や写真などを映しておく
などとしてテレビだけではなくマルチに使えるようにして、21～23インチぐらいのものを3万円ぐらいで出せばいいのにと。NHKは映らないようにして。[/info]

改行を入れると、うまく動作しないようですが、1ライナーで書けば動作するようです。
上記は以下のようになっています

<p>[info]僕は常々思ってるんですが、最近のテレビは薄型・軽量になってきたので壁にかけることができると思います。<br>壁にかけられるのであれば回転できる受けデバイスを壁に取り付け、そこにテレビをかけて、<br/>・テレビを見る時は横向き<br/>・縦向きにしてインターネットを見れてタッチ操作もできるように<br/>・普段はフォトフレームとして縦でも横でも好きな絵画や写真などを映しておく<br/>などとしてテレビだけではなくマルチに使えるようにして、21～23インチぐらいのものを3万円ぐらいで出せばいいのにと。NHKは映らないようにして。[/info]</p>

途中の改行、これはおそらく正規表現の問題なのかなぁと思いつつ、とりあえずは現行通りの仕様で。
ulなどはBloggerのエディターにバグ？仕様があるようで、そもそもpの中でul・ol、あるいはliのみは使えません。1ライナーで書いてもおそらく同様かと思います。
<br />は問題ないというのはわかりました。

改行入りの文章に対応しました

[info blue]僕は常々思ってるんですが、最近のテレビは薄型・軽量になってきたので壁にかけることができると思います。
壁にかけられるのであれば回転できる受けデバイスを壁に取り付け、そこにテレビをかけて、

・テレビを見る時は横向き
・縦向きにしてインターネットを見れてタッチ操作もできるように
・普段はフォトフレームとして縦でも横でも好きな絵画や写真などを映しておく

などとしてテレビだけではなくマルチに使えるようにして、21～23インチぐらいのものを3万円ぐらいで出せばいいのにと。NHKは映らないようにして。[/info]

<p>[info blue]僕は常々思ってるんですが、最近のテレビは薄型・軽量になってきたので壁にかけることができると思います。<br>
壁にかけられるのであれば回転できる受けデバイスを壁に取り付け、そこにテレビをかけて、<br>
<br>
  ・テレビを見る時は横向き<br>
  ・縦向きにしてインターネットを見れてタッチ操作もできるように<br>
  ・普段はフォトフレームとして縦でも横でも好きな絵画や写真などを映しておく<br>
<br>
などとしてテレビだけではなくマルチに使えるようにして、21～23インチぐらいのものを3万円ぐらいで出せばいいのにと。NHKは映らないようにして。[/info]</p>

しかし、pタグのネストやul、あるいはliだけを入れるのは相変わらずできません。出力ができないわけではないですがレイアウトが崩れます。
<br/>はshift + enterで自動入力できるのと、1ライナーと違って見た目が同じ方がわかりやすいので修正した内容でひとまず行こうかと思います。

ただし、改行入りのテキストが行けるとしても出力を同じにしようとすると改行の<br/>は入れる必要があります。
1ライナーで書く必要がなくなったというだけです。

自動リンクはできるかどうか

[info]google
https://www.google.com/ [/info]

上記は以下のように書いてあります。

<p>[info]google <br/> https://www.google.com/ [/info]</p>

手動のリンクではどうか

[info]手動でGoogleのリンクにするGoogle[/info]

<p>[info]手動でGoogleのリンクにする<a href="https://www.google.com/" target="_blank">Google</a>[/info]</p>

リンクを考慮せずテキストとしてアドレスが書いてある場合はどうか

[info]Googleのアドレスはhttps://www.google.com/です[/info]

これらをまとめると、自動リンクが効いてしまうので、アドレスだけをテキストで入れる場合はアドレスの後に半角スペースが必要である感じです。

画像を入れることはできるか？

[info]画像を入れてみるテスト[/info]

画像を入れると<div class='separator...'というのが画像のリンクとimgタグを囲むようにして入るが、それら<div></div>をそれぞれ取り除けば画像は貼れるようだ。
画像はこのテンプレートのスクリプトでwidth,height属性をカラにしているため、もしサイズをいじるのであればaタグにstyle属性でサイズを指定する必要がある。
pタグの中にdivを入れるとbloggerの仕様でエラーと言うか閉じpタグが赤字になる。

文章の途中で入れた場合はどうなるか

もともと正規表現は形式言語理論において正規言語を表すための手段として導入された。形式言語理論では、形式言語が正規言語であることと正規表現によって表せることは同値である。[info]その後正規表現は単機能の文字列探索ツールやテキストエディタ、ワードプロセッサなどのアプリケーションで、マッチさせるべき対象を表すために使用されるようになり、表せるパターンの種類を増やすために本来の正規表現にはないさまざまな記法が新たに付け加えられた。[/info]このような拡張された正規表現には正規言語ではない文字列も表せるものも多く、ゆえに正規表現という名前は実態に即していない面もあるが、伝統的に正規表現と呼ばれ続けている。

<p>もともと正規表現は形式言語理論において正規言語を表すための手段として導入された。形式言語理論では、形式言語が正規言語であることと正規表現によって表せることは同値である。[info]その後正規表現は単機能の文字列探索ツールやテキストエディタ、ワードプロセッサなどのアプリケーションで、マッチさせるべき対象を表すために使用されるようになり、表せるパターンの種類を増やすために本来の正規表現にはないさまざまな記法が新たに付け加えられた。[/info]このような拡張された正規表現には正規言語ではない文字列も表せるものも多く、ゆえに正規表現という名前は実態に即していない面もあるが、伝統的に正規表現と呼ばれ続けている。</p>

このように文章の途中に入っていても正しく抜き出せてはいるけれどもデザインのせいで文字と被ってしまっている。デザインを変更しましたので被らなくなりました。これらはcssで回避は可能と思われる。

他に入れられなかったもの

table、hr、addressは閉じpタグが赤になった。htmlモードで完結する場合は無理やり更新することはできそうだが、一般モードに変えられなくなるのと、サイト上ではレイアウトに問題が出る。おそらくインライン要素であれば行けそうな気もしないでもない。
すべてを試してないので定かではないが、文字を書いたり装飾するようなものは使えるようだ。svgも行ける感じ。

[info]SVGはこんな感じで。[/info]

正規表現がうまく動作したので追加でカスタム可能に

色々と試して色々と探りまくってinfoのショートコードにクラスを追加できる感じになりました。
書き方としては他のクラスと同等に、

<p>
	[info red]ここにテキスト[/info]
</p>

このような感じです。redを入れると、

<div class='info red'>ここにテキスト</div>

といった出力になります。デザインはまた変えるかもしれませんが、色分けとタイトル文字は変えられます。タイトルは廃止してSVG等を入れられるようにしました

[info]ノーマル[/info]

[info red]赤[/info]

[info blue]青[/info]

青だけSVGを変えてみました。CSSで変更ができます。これらは、

[info]ノーマル[/info]


[info red]赤[/info]


[info blue]青[/info]

このように書かれています。