herohoroブログ

supportされてる機能確認



🔄   2022-11-04

ここに記載されていない装飾をしてしまうとブログで非表示になってしまいます。

ご注意ください(´・ω・`)

***********************

▼ web bookmark:解説記事

▼ twitter embed:解説記事

*****検証中

↑ インデント表示はまだです

*****

▼ 空ブロック(3行連続)

▼ Bold

太字太字太字ここが太字

▼ Underline

下線下線下線ここで下線

▼ Italicize

ここが斜め文字aaaaaaaa

▼ Strike-through

取り消し取り消しここを取り消し線

▼ Mark as code

コードコードgit pushコード

▼ Text color :03/11_追加

文字の途中で色を変える

▼ Equation :07/23

計算をしたいときに複雑な式x24x+1=0x^2 - 4x + 1 = 0を書ける

▼ Equationブロック:07/23_解説記事

数式じゃなくたって使えるのがEquationの魅力\large \text{数式じゃなくたって使えるのがEquationの魅力}

▼ Heading 1:カスタム済み_解説記事

見出し1

▼ Heading 2:カスタム済み_解説記事

見出し2

▼ Heading 3:カスタム済み_解説記事

見出し3

▼ ToDo list:10/02

やること1
やること2
    やること2−1
    まだやる2−2

▼ Bulleted list

  • リスト1
  • リスト2
    • 子リスト1:以降_02/23 追加
    • 子リスト2
      • 孫リスト
      • 孫リスト
        • ひ孫リスト
          • 玄孫リスト
            • 永遠....

▼ Numbered list

  1. ナンバーリスト1
  2. ナンバーリスト2
    1. 子ナンバーリスト:以降_02/23 追加
    2. 子ナンバーリスト
      1. 孫ナンバーリスト
      2. 孫ナンバーリスト
        1. ひ孫ナンバーリスト
          1. 玄孫ナンバーリスト
            1. 永遠......

▼ Color block:05/07_修正

テキストの色に着色

テキストの色に着色

テキストの色に着色

テキストの色に着色

▼ BackgroundColor block:03/11_追加

背景に色を付けちゃう

背景に色を付けちゃう

背景に色を付けちゃう

背景に色を付けちゃう

*******

▼ 他に着色(Text color, Color, BackgroundColor)できるブロック:05/07_修正|03/11_追加_:解説記事

一部文字色block文字色block文字色❌一部文字色block文字色❌一部背景色一部背景色block背景色block背景色❌一部文字色block背景色❌一部背景色
テキスト❎ → ⭕❎ → ⭕❎ → ⭕
見出し
リスト
ナンバーリスト
コールアウト❎ → ⭕❎ → ⭕❎ → ⭕
引用

★ テキスト(paragraph)

テキストの一部に色を変更する

テキストの文字に着色 👉05/07_修正

テキストの文字色を付けて一部の色を変更する👉05/07_修正

テキストの文字色を付けて一部の背景色を変更する👉05/07_修正

テキストの一部に背景色をつける

テキストに背景色を付ける

テキストに背景色を付けて一部の色を変更する

テキストに背景色を付けて一部の色を変更する

★ 見出し

通常の見出し
見出しの一部で色を変更する
見出しの文字に着色 👉No Support
見出しの一部で背景色を付ける
見出しに背景色を付ける
見出しに背景色を付けて一部の色を変更する
見出しに背景色を付けて一部の背景色を変更する

★ リスト(Bulleted list)

  • 通常リスト
  • リストの一部で色を変更する
  • リストの文字に着色
  • リストに文字色を付けて一部の色を変更する
  • リストに文字色を付けて一部の背景色を変更する
  • リストの一部で背景色を付ける
  • リストに背景色を付ける
  • リストに背景色を付けて一部の色を変更する
  • リストに背景色を付けて一部の背景色を変更する

★ ナンバーリスト( numbered_list_item)

  1. 通常ナンバーリスト
  2. ナンバーリストの一部で色を変更する
  3. ナンバーリストの文字に着色
  4. ナンバーリストの文字色を付けて一部の色を変更する
  5. ナンバーリストの文字色を付けて一部の背景色を変更する
  6. ナンバーリストの一部で背景色を付ける
  7. ナンバーリストに背景色を付ける
  8. ナンバーリストに背景色を付けて一部の文字を変更する
  9. リストに背景色を付けて一部の背景色を変更する

★ Callout

🥳
通常のコールアウト
🥳
コールアウトの一部で色を変更する
🥳
コールアウトの文字に着色 👉05/07_修正
🥳
コールアウトの文字色を付けて一部の文字を変更する 👉05/07_修正
🥳
コールアウトの文字色を付けて一部の背景を変更する 👉05/07_修正
🥳
コールアウトの一部で背景色を付ける
🥳
コールアウトに背景色を付ける
🥳
コールアウトに背景色を付けて一部の文字を変更する
🥳
コールアウトに背景色を付けて一部の背景を変更する

★ Quote

通常の引用ブロック
引用の一部で色を変更する
引用の文字に着色
引用に文字色をつけて一部の色を変更する
引用に文字色をつけて一部の背景色を変更する
引用の一部で背景色を付ける
引用に背景色を付ける
引用に背景色を付けて一部の文字を変更する
引用に背景色を付けて一部の背景色を変更する

★ Table列 👉No Support

A列B列
1行
2行

******* ▲ 着色に関するブロック以上 ******

▼ Table:10/11 改行 | 05/21 スクロール | 01/10New_解説記事

A列B列C列D列E列F列G列
1行A1A1A1A1A1A1B1B1B1B1B1B1C1C1C1C1C1C1D1D1D1D1D1D1E1E1E1E1E1E1F1F1F1F1F1F1F1G1G1G1G1G1G1G1G1
2行A2B2C2D2E2F2G2
セル内改行A AB BC CD DE EF FG G

▼ Toggle:09/04

表示したりしなかったりできる

やっほー\(^o^)/

長くなるコードもしまえちゃう
jest.mock('../../../src/lib/notion/blog-index-cache')

import { render } from '@testing-library/react'
import RenderPosts from '../../../src/pages/blog/index'

import {
  getPosts,
  getFirstPost,
  getRankedPosts,
  getAllTags,
} from '../../../src/lib/notion/client'

jest.mock('next/router', () => ({
  useRouter() {
    return {
      asPath: '/blog',
      pathname: '/blog',
    }
  },
}))

describe('RenderPosts', () => {
  it('renders the page unchanged', async () => {
    const posts = await getPosts()
    const firstPost = await getFirstPost()
    const rankedPosts = await getRankedPosts()
    const tags = await getAllTags()

    const { container } = render(
      <RenderPosts
        posts={posts}
        firstPost={firstPost}
        rankedPosts={rankedPosts}
        tags={tags}
      />
    )
    expect(container).toMatchSnapshot()
  })
})
隠したいブロックは複数でもOK
col01
index01
index02
  • あれ
  • これ
  • ほほ
💁🏻‍♀️
内緒のメッセージを入れておくのも面白いかも〜(開いたらみんな見れちゃうけど)

▼ Quote

引用した記述はこんな感じ

▼ Divider:12/19追加_カスタム済(06/18)


▼ Callout

🐣
メモ
🐣
メモ 改行も対応___2022/07/16

▼ Emoji

😀

▼ Image:カスタム済み_解説記事

画像が読み込まれない場合はページを更新してみてください。

▼ Code_2021/12/28追加

git commit -m"コードを説明する時使える"
コードキャプションでコメントを記入できます(*^^*) 2022/01/27追加

 Mermaidモード_2022/02/18(previewモード):追加_解説記事

Mermaidテーマ:neutral_2022/07/23

MermaidモードでGit graphも対応_2022/05/28

▼ Video_2022/06/23追加_ 解説記事

▼ 2column_2022/08/26

画像が読み込まれない場合はページを更新してみてください。
画像が読み込まれない場合はページを更新してみてください。

▼ 同期ブロック_2022/09/04

同期にしたいブロック

  • 複数ブロックをまとめられる
  • 複数ブロックをまとめられる
  • 複数ブロックをまとめられる
h
ehe
oho

↑本家ブロック

↓貼り付けられたブロック

同期にしたいブロック

  • 複数ブロックをまとめられる
  • 複数ブロックをまとめられる
  • 複数ブロックをまとめられる
h
ehe
oho

▼ もくじブロック

*****************

進捗一覧

v0.2.0以前追加公式API待ち
テキスト
段落テキスト
ブロック内改行
空ブロック
リスト
 子リスト以降
To-doリスト⭕ 10/02
Numリスト
 Num子リスト以降
color-block⭕ 05/07fix_03/11new03/08発表
BackgroundColor block⭕ 03/11new03/08発表
color-text⭕ 03/11new03/08発表
h1~h3タイトル
絵文字
画像
太字
下線文字
取り消し線文字
コード文字
数式⭕07/23
inline-数式⭕07/23
inline-page
table⭕ 01/10 new 05/24 Add scroll 10/11 Fix セル内改行01/08発表
toggleリスト⭕ 09/04
 子toggleリスト
Quote
Divider
calloutブロック内改行_07/16
inline-database
codeblock⭕ + caption mermaid(+preview)_02/18new mermaid(+Git graph)_05/28new neutralテーマ_07/24
Web bookmark
Video⭕ 06/23 new
embed
mention-page
sync⭕ 09/04
twitter embed
2column⭕ 08/26
Table of contents⭕ 10/17

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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