スタイルのユーザーを生成する方法

最近、私と一緒にフィドルをしているTailwind CSSとEleventy - ( My site は、😉 - 彼らを愛して😍). 私はそれらのいずれかについて詳細に話をするつもりはない、私はそれのための後のポストを持っているよ!私は問題に遭遇しました、そして、私はそれを解決する方法が全くわからなかったです.それで、私は彼らが同じ問題を持っているならば、他の人のために問題と解決についてすぐに書きたかったです.

問題

私はToowindを使用して私のサイト上のスタイルのすべての方法を考え出していた-それは素晴らしいですし、しない場合は、それをチェックアウトする必要があります.問題は-私は自分のブログの投稿のためのユーザー生成のMarkdownスタイルの方法がなかった.その時、私はサイトのいくつかのポストを持ちました、そして、彼らはその良い探していませんでした.しかし、私はこれを成し遂げる方法を知りませんでした.テンプレート言語ランゲージホルダーにコンテンツを注入するテンプレート言語を使用している間、静的サイトジェネレータはHTMLでMarkdownを変換します.私が持っていたコードは次のとおりです.

{{ content | safe }}

でもどうやって選ぶの<h1> 私のブログ記事のタグとすべてのH 1タグサイトワイド?または<p> ユーザーのタグは、投稿からコンテンツを生成?

解決策

振り返ってみると、それは簡単な解決策でしたが、今のところ、私には考えがありませんでした!いくつかの簡単なGoogle検索の後-私はかなり素晴らしい解決策を見つけた.ただ、ユーザが生成したポストを保持しているdivにMarkdownクラスを加えてください!それは単純な解決であり、私が私自身で思い付いた何かではない-私はTailwind あなたがブログとフォーラムを見たいと思うならば、私はこの情報が見られるとわかりましたhere & here !
これにより、特定のマークサイトを選択する心配なしに、特定のマークダウンを生成する方法を指定できます.それで、私のHTMLが上記のコード・ブロックのように見える代わりに、それは現在追加されましたmarkdown 以下に示すdivのクラス

{{ content | safe }}

PS -あなたが好きなクラスに名前を付けることができます-私は、ちょうど最も直感的に思えるように、上記のブログの記事で使用されるコンベンションで立ち往生しました.このクラスセレクタを追加することによって、メインのCSSを書くことができます.CSSファイルを私の投稿スタイルです.そして、最高の部分?私はまだTarwindでそれを書くことができます@apply ディレクティブ.

ここからどのようにスタイルをカスタマイズすることができますあなたの投稿が好きです!再びその簡単な解決策は、私は瞬間に考えることができなかったが、それは素晴らしい解決策ではないにもかかわらず!
次回まで-コーディングを保つ!
私のブログをチェックしてください.Here