reStructuredTextのAdmonitionsディレクティブをPloneでレンダリングするためのcss

reStructureTextってのは、いわゆる構造化テキストの一種で、パーサによってHTMLなんかに容易に変換できるように構造化された文書で、かつソースを自然文として普通に読めるという特徴をもった文書のこと。 詳細はWikipediaの説明ページを参照 のこと。

このreStructureTextはPython言語のDocutilsフレームワークとして開発されたという経緯があるため、このサイトのCMSであるPloneでも標準の構造化テキストとして使用されている。このサイト内の文書も、Plone移行後に書いたもの(このブログ内の投稿も)はreStructuredTextで書いている。HTMLのタグをちまちま書くのもめんどくさいしね。

で、reStructureedTextには、admontionsディレクティブ、っていう仕組があって、ソースで、

.. DANGER::
   Beware killer rabbits!

と書くと、

みたいに段落自体を強調表現してくれることが期待される。(これ、 reStructuredテキストのディレクティブのドキュメント からそのまま持ってきた例文だけど、 ホーリーグレイル ネタじゃないか。 Python の人って、本当に パイソン 好きだな。かくいう私も字幕版ビデオ、字幕版DVDに加え、 吹替版DVD を当然の如く購入しましたが。pythonは入門レベルだけど)

ただ、Ploneの初期設定では、admontionsディレクティブを他の段落と区別が付くようにレンダリングしてくれない。そこで、 takanory.net[archive] さんとこの 説明[archive]を参考に、ploneCustom.cssを以下のように編集してみた。

div.attention, div.caution, div.danger, div.error, div.hint, div.important, div.note, div.tip, div.warning {
   margin: 2em 4em;
   padding: 0.5em;
   border-style: solid;
}

div.caution>p.admonition-title, div.danger>p.admonition-title, div.warning>p.admonition-title {
   color: red;
}

p.admonition-title {
   text-align: center;
   font-weight: bold;
}

今勉強も兼ねて、 reStructuredText Markup Specification の翻訳に挑戦しているんだけど、ディレクティブの説明も訳さなきゃ全体像は掴めない・・かな?

(2/28)上下のマージンが大き目なので修正しました。

コメント(0)



Note

本サイトのハイパーリンクの一部は、オリジナルのサイトが閉鎖してしまったため"Internet archive Wayback Machine"へのリンクとなっています。そのようなリンクにはアイコン[archive]を付与しています。

本サイトはCookieを使用しています。本サイトにおけるCookieは以下の三種類のみであり、Cookieの内容に基づいてサイトの表示を変更する以外の用途には用いておりません。