herohoroブログ

Equation-blockをsupportして広がるテキスト表現



🔄   2023-03-14

Notionで数式を記入できる。

よくよく調べてみると数学的な式だけでなく

文字の装飾もできる。

( ゚д゚)ハッ!

Notionでできるならeasy-notion-blogだってできるはず🔥

ってことで、

気合と執念でequation-blockをsupportしてみました。

今回はequation blockでできる

突発的な文字の装飾について紹介しま〜〜〜す(・∀・) 👍

文字色(Text Colors)・背景色(Background Colors)についてはひつじさんのテンプレで簡単に作れるので説明は省略します。

https://crossn.gumroad.com/l/Color-Palette

💁🏻‍♀️
過去に記事にしています。ご興味ある方はどうぞ〜
テキストを可愛くアレンジできるColor Paletteが激アツだ_equation

※ 以下で紹介するequationのサンプルはHarishさんのスレッドの末尾についていたテンプレを使わせていただいておりますm(_ _)m

👇

image block

https://www.notion.so/KaTeX-Formatting-8f2a6470b9d34fa98be19ad25dfc587d

🌈
このテンプレから入力と出力を対にして紹介するよ〜〜〜〜(・∀・)

Background Colors & border-line Colors

文字と背景と枠線の色を変えられる🎶\(^o^)/

add a simple border\fbox {add a simple border}
\fbox {add a simple border}

use color boxes with borders\color{lavender} \fcolorbox{midnightblue}{orchid}{use color boxes with borders}
\color{lavender} \fcolorbox{midnightblue}{orchid}{use color boxes with borders}

color borders and text only\color{tomato} \fcolorbox{tomato}{white}{color borders and text only}
\color{tomato} \fcolorbox{tomato}{white}{color borders and text only}

color backgrounds and text\color{midnightblue} \fcolorbox{green}{greenyellow}{color backgrounds and text}
\color{midnightblue} \fcolorbox{green}{greenyellow}{color backgrounds and text}

experiment with combinations\mathsf{} \color{navajowhite} \fcolorbox{darkslateblue}{orange}{experiment with combinations}
\mathsf{} \color{navajowhite} \fcolorbox{darkslateblue}{orange}{experiment with combinations}

 add a simple border\fbox{ \color {#8b4e96}{add a simple border}}
\fbox{ \color {#8b4e96}{add a simple border}}

Fonts

フォントも変えられる🎶\(^o^)/

Typewriter \mathtt {Typewriter}
\mathtt {Typewriter}

Sans Serif \mathsf {Sans~Serif}
\mathsf {Sans~Serif}

CHALKBOARD \mathbb {CHALKBOARD}
\mathbb {CHALKBOARD}

Roman \mathrm {Roman}
\mathrm {Roman}

Caligraphic \mathcal {Caligraphic}
\mathcal {Caligraphic}

Sizes

サイズも変えられる🎶\(^o^)/

Tiny\tiny {Tiny}
\tiny {Tiny}

Script Size\scriptsize Script~Size
\scriptsize Script~Size

Footnote Size\footnotesize Footnote~Size
\footnotesize Footnote~Size

Small\small Small
\small Small

Normal Size\normalsize Normal~Size
\normalsize Normal~Size

Large\large Large
\large Large

Large\Large Large
\Large Large

Large\LARGE Large
\LARGE Large

Huge\huge Huge
\huge Huge

Huge\Huge Huge
\Huge Huge

Text Decorations

文字にいろんな線を追加できちゃう🎶\(^o^)/

swooshy underline~\utilde{swooshy~underline}
\utilde{swooshy~underline}

underline right arrow\underrightarrow{underline~right~arrow}
\underrightarrow{underline~right~arrow}

underline left arrow\underleftarrow{underline~left~arrow}
\underleftarrow{underline~left~arrow}

underline\underline{underline}
\underline{underline}

group1group2group3\undergroup{group1} \undergroup{group2} \undergroup{group3}
\undergroup{group1} \undergroup{group2} \undergroup{group3}

strikethrough\sout{strikethrough}
\sout{strikethrough}

Xcancel\xcancel{Xcancel}
\xcancel{Xcancel}

overline\overline {overline}
\overline {overline}

エラーがあって全ては取り込めていない

image block

image block

まとめ

数学的な式を使うため….なのかもしれないequationですが、

装飾のツールとして使える!!!

まだブロックでしか実装できていないので

image block

Block equationから呼び出します。

ひつじさんのテンプレを紹介した

テキストを可愛くアレンジできるColor Paletteが激アツだ_equation

では…..

image block

テキストをequation装飾をして表示していました。。。。

これは未だできておりません…..(´・ω・`)

Block equationで呼び出すのみです!!!

ゆくゆくはsupportしたいな〜と企んでおりますが、

とりあえず、ブロックでもsupportできたのでニコニコです\(^o^)/

実装するには

テキスト(Paragraph)ブロックをsupportする手順を元に進めました。

image block
DBに収納されたPage内に記入したテキストをブログに表示させる~block & Block の闇~| Blog learn06 より

https://herohoro.com/blog/blog-learn_page-content_paragraph#Paragraph blockを取得する

今回はcomponentを用意してkataxライブラリを使って表示するので「3.取得できているか確認」の部分は異なります。

image block
ブログでYouTubeを再生できるようにセルフサポートしたらblockの取得から表示までの流れが染み込むように理解できたよ_react-youtube より

https://herohoro.com/blog/video-embed_react-youtube#取得した情報を表示できる状態にする

Video(Youtube) blockのcomponentを用意する時と同じ用にnotion-blocksディレクトリにファイルを用意して

kataxライブラリを仕込みました(´・ω・`)

ライブラリ有無によってBlog learn06とvideo blockとを使い回せば

今後もセルフsupportできそうだなということに気づけました🎶

\(^o^)/

以上。速報でした!!


後話…..

ひつじさん(@crossma64)によるとフォントは日本語だとあまり変化ないようです 🤡

テキストの装飾でequationにする実装。

実はふくろうさん(@ShunDeveloper)実装されております😂(ワタシモガンバルー)

easy-notion-blogのコミュニティメンバーの方々から

いつもいろんな情報をGetできるので

楽しくてたまらないへろほろです👯👯👯👯👯

(*´∀`*)


後日、本家もサポートされました\(^o^)/

テキスト装飾も使えます⭐(●´ϖ`●)ありゃりゃ

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/