2017年6月6日火曜日

法律家のためのChromebook:emacs/org-mode、html出力

H290606記載
Googleドキュメントがhtml解釈ができるようになりました。特に見出しの形状等に凝ることが簡単にできます。html作成は、emacs/org-modeにより、ブラウザで開き、一気にコピペ(そのままの貼り付け)で、一瞬で作業が終了となります。アナログ的な思考を持ち込みます。


   

1 法律家のためのChromebook:emacs/org-mode、html出力

 
 Googleドキュメントでhtml解釈ができるようになりました。今一度メモ的に、emacs/org-modeでのhtml生成/出力を書いておきます。

1.1 emacs/org-modeでのcss(基本)

 
 emacs/org-modeでのcssは、普通のhtmlとは異なり別ファイルにしないほうが便利です。html出力するファイルに直接cssを書き込みます。表記の仕方がorg-modeのバージョンによって遺います。現在使用(9.0.1)(H29.6.5現在)。冒頭に 「#+HTML_ HEAD」を入れることで、全体にききます。間に挟むことができます。


#+HTML_HEAD: <style type="text/css">  h1,h2,h3,h4{  margin: 30mm,20mm,25mm,30mm;font-family: "MS 明朝","MS Mincho","メイリオ","Meiryo","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","Meiryo UI","メイリオ","Meiryo","MS 明朝","MS Mincho",sans-serif;  }   #postamble{ display:none;}   h1 {  background-color: white;  border-left-width: 20mm;  padding: 2.0ex 0.2ex 0ex 0.6ex; font-size:18pt;}  h2 {  border-left: 7px solid #CCCCCC;    border-bottom: 2px solid #CCCCCC;    padding:0.3em 0.4em;  background-color: white; font-size:15pt;} h3 {  border-bottom: 2px solid #CCCCCC; padding: 0em 2cm 0.1em 0.8em;   /* text-decoration: underline; */  background-color: white;  border-left-width: 20mm; font-size:14pt;} h4 {  text-decoration:none;text-decoration: underline; padding: 0em 2cm 0.1em 0.8em; /* border-bottom: 2px dotted #CCCCCC; */  background-color: white;  border-left-width: 20mm; font-size:13pt;}body { font-size: 12pt; margin:30mm,20mm,25mm,30mm;font-family: "Noto Sans JP","MS 明朝","MS Mincho","メイリオ","Meiryo","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","Meiryo UI","メイリオ","Meiryo","MS 明朝","MS Mincho",sans-serif;} 
#+HTML_HEAD: </style>

などと書きます。ずらっと1行に並べて書けば、2つの「#+HTML_ HEAD:」で書けます。別途cssを準備することもできます。org-modeのデフォルトcssに追加していくのが簡単です。


 デフォルト書式がいらない場合は、↓

#+OPTIONS: html-style:nil

のオプションを記載しておきます。

 open-junk-file(el)を使っている場合は、template.orgなどのテンプレートファイルに記載しておきます。

1.2 Googleドキュメントへの貼り付けのための工夫


 Googleドキュメントでは、同じ書式を持つ文章(集合体)を、一括選択することができます。小見出しごとに書体をGoogleドキュメントで変えるために、少しずつ、上記では、フォントサイズを変えています。

 こうすることで、Googleドキュメントで、例えばh2の見出し、右クリックで、「一致するテキストをすべて選択」で、見出しの書式等微調整が一気に可能となります。

1.3 cssの見出し例

 
 cssの見出し例 リンク ↓

http://www.nxworld.net/tips/50-css-heading-styling.html


このリンクのはかなり使えます。おもしろいのができます。

1.4 文中html(css)挿入


 文中の場合は、

@@html:htmlタグ@@

です。

 リンクにある、二重に見出し語をつくる場合でも、

@@html:<span>@@  Googleドキュメントでhtml解釈ができる @@html:</span>@@ 今一度メモ的に

で、できます。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・