Dynalistのハイライトやストライクスルーをアンダーラインとして使う

WorkFlowyとDynalistのフォーマットの違い

	WorkFlowy	Dynalist
ボールド	○	○
イタリック	○	○
アンダーライン	○	×
ハイライト	×	○
ストライクスルー	×	○

そもそもMarkdown自体がアンダーラインをサポートしていないから、Markdown対応を謳うDynalistもアンダーラインをサポートしないということだろう。

そこで、「パンが無ければケーキを食べればいいじゃない」ではないが、アンダーラインが無ければハイライトやストライクスルーを使えばいいじゃない的な。

Dynalistのハイライト表示をアンダーライン表示に変える

Dynalistでは、==このように==、半角イコール2つで挟めばハイライト表示になる

黄色バックグラウンドのハイライト表示

HTMLの該当部分

<span>Dynalistでは、</span><span class="node-highlight"><span>このように</span></span><span>、半角イコール2つで挟めばハイライト表示になる</span>

ハイライト表示される部分は、node-highlightクラスのspan要素の中。

CSSの該当部分

https://dynalist.io/assets/css/theme_default.css のnode-highlightクラスの定義部分

.node-highlight {
  background-color: rgba(255, 255, 0, 0.4);
}

バックグラウンドカラーは黄色(赤255(100%) + 緑255(100%) + 青0%)の透明度40%になっている。

アンダーラインに変えるCSS

テキスト修飾をアンダーラインにして、黄色のバックグラウンドカラーの透明度を0%にする。

Custom CSS (proプラン用)

.node-highlight {
  text-decoration: underline;
  background-color: rgba(255, 255, 0, 0.0);
}

Stylusにインポートするスタイル (freeプラン用)

@-moz-document url-prefix("https://dynalist.io/d/") {
.node-highlight {
    text-decoration: underline;
    background-color: rgba(255, 255, 0, 0.0);
}
}

適用結果

ハイライトがアンダーラインに化けた

Dynalistのストライクスルー表示をアンダーライン表示に変える

Dynalistでは、~~このように~~、半角チルダ2つで挟めばストライクスルー表示になる

HTMLの該当部分

<span>Dynalistでは、</span><span class="node-strike-through"><span>このように</span></span><span>、半角チルダ2つで挟めばストライクスルー表示になる</span>

ストライクスルー表示される部分は、node-strike-throughクラスのspan要素の中。

CSSの該当部分

https://dynalist.io/assets/css/app.css?v=20210526023526 のnode-strike-throughクラスの定義部分

.node-strike-through {
    text-decoration: line-through;
}

テキスト修飾がラインスルーになっている。

アンダーラインに変えるCSS

テキスト修飾をアンダーラインにする。

Custom CSS (proプラン用)

.node-strike-through {
  text-decoration: underline;
}

Stylusにインポートするスタイル (freeプラン用)

@-moz-document url-prefix("https://dynalist.io/d/") {
.node-strike-through {
    text-decoration: underline;
}
}

適用結果

ストライクスルーがアンダーラインに化けた

WorkFlowyのアンダーラインをDynalistのハイライトやストライクスルーに置き換える

WorkFlowyのExportでOPMLを選んだ場合のフォーマット

ボールド、イタリック、アンダーラインの部分は次のようになっている。

	コード
ボールド	<b>テキスト</b>
イタリック	<i>テキスト</i>
アンダーライン	<u>テキスト</u>

そして、完了したアイテムは「_complete」属性が「true」

DynalistのExportでOPMLを選んだ場合のフォーマット

ボールド、イタリック、ハイライト、ストライクスルーは次のようになっている。

	コード
ボールド	**テキスト**
イタリック	__テキスト__
ハイライト	==テキスト==
ストライクスルー	~~テキスト~~

完了したアイテムは「complete」属性が「true」

ショートカット

クリップボード内のテキストの、

• <b>を**に
• </b>を**に
• <i>を__に
• </i>を__に
• <u>を==あるいは~~に
• </u>を==あるいは~~に
• _completeをcompleteに

置き換えるだけのショートカット。

https://www.icloud.com/shortcuts/394ac3318a144b9792e3f7d7b8f56097

置き換えた結果

このWorkFlowyの内容を「Export」でOPMLを選び、クリップボードにコピー、

上記ショートカットでクリップボードの内容を置き換え後、Dynalistに貼り付けた結果。
表示を化けさせるCSSを適用していると、うまくアンダーラインが表示された。