org-mode用にエクスポートされたhtmlファイル内のソースコードブロックの構文の強調表示とインデント


9

Cコードブロックをorg-modeファイル内に挿入すると、構文ハイライトとソースコードのインデントが希望どおりにカスタマイズされます。

  1. htmlファイルにエクスポートすると、htmlファイルの構文の強調表示はEmacsとまったく同じです。しかし、構文の強調表示は、私のEmacsのカラーテーマでうまく機能します。たとえば{、Cコードブロックではシンボルは白ですが、カラーテーマは暗いので、htmlにエクスポートすると、htmlファイルの背景も白になります。つまり、{のソースコードブロックには表示されません。そこにあると思っていても、htmlをエクスポートしました。

  2. Emacsでソースコードのインデントは通常どおりですが(カスタマイズしたため)、エクスポートされたhtmlファイルのソースコードのインデントは異なり、インデント用のスペースが追加されます

  3. 同じorgファイルをでエクスポートした場合emacs -q、エクスポートされたhtmlファイルでは正常ですが、ソースコードの構文の強調表示とインデントdefaultはEmacs の構成になります。つまり、のフォントフェイス設定がinit.elに影響することを意味しますorg-export

だから私の質問です:ソースコードブロックを含むorg-modeファイルをhtmlファイル(またはPDFなどの他の形式)にエクスポートするとき、自分に関するすべてのフォントフェースの構成を取り除くことができますか?ソースコードと同様にそれを行いemacs -qますか?

更新

2番目の問題は(setq org-src-preserve-indentation t)、initファイルに設定するか、M-:eval-expression)を実行することで解決されます。

Update2

最初の問題は、テーマに従ってorg-exported <code>ブロックの背景を設定することで解決されます。

3番目の問題は、1番目と2番目の問題が解決されている場合は重要ではありません。

回答:


10

このソリューションは、elisp、org-mode、cssのカスタマイズにまたがっています。

elisp

デフォルトでは、フォント設定情報はエクスポートされたhtmlファイルに埋め込まれます。これを無効にし、外部のcssファイルを使用してフォントのフォーマット情報を指定する予定であることをorg-modeに通知する必要があります。

HTMLクラス名の前にorg-文字列を付けることを選択しました。

;; (setq org-html-htmlize-output-type 'inline-css) ;; default
(setq org-html-htmlize-output-type 'css)
;; (setq org-html-htmlize-font-prefix "") ;; default
(setq org-html-htmlize-font-prefix "org-")

組織モード

次に、org-fileで、使用するcssファイルを指定します。このファイルには、各org-クラスのフォーマット方法に関する情報が含まれています。

# My custom fontification theme
#+HTML_HEAD: <link href="path/to/your/custom/theme.css" rel="stylesheet">

CSS

以下は、からカラーコードをコピーしたカスタムテーマのcssファイルですleuven-theme。あなたは私のgitから以下のCSSの最新バージョンを見つけることができます。

/* Set the colors in <pre> blocks from the Leuven theme */
pre                                      {background-color:#FFFFFF;}
pre span.org-builtin                     {color:#006FE0;font-weight:bold;}
pre span.org-string                      {color:#008000;}
pre span.org-keyword                     {color:#0000FF;}
pre span.org-variable-name               {color:#BA36A5;}
pre span.org-function-name               {color:#006699;}
pre span.org-type                        {color:#6434A3;}
pre span.org-preprocessor                {color:#808080;font-weight:bold;}
pre span.org-constant                    {color:#D0372D;}
pre span.org-comment-delimiter           {color:#8D8D84;}
pre span.org-comment                     {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-1            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-2            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-3            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-4            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-5            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-6            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-7            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-8            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-9            {color:#8D8D84;font-style:italic}
pre span.org-rainbow-delimiters-depth-1  {color:#707183;}
pre span.org-rainbow-delimiters-depth-2  {color:#7388d6;}
pre span.org-rainbow-delimiters-depth-3  {color:#909183;}
pre span.org-rainbow-delimiters-depth-4  {color:#709870;}
pre span.org-rainbow-delimiters-depth-5  {color:#907373;}
pre span.org-rainbow-delimiters-depth-6  {color:#6276ba;}
pre span.org-rainbow-delimiters-depth-7  {color:#858580;}
pre span.org-rainbow-delimiters-depth-8  {color:#80a880;}
pre span.org-rainbow-delimiters-depth-9  {color:#887070;}
pre span.org-sh-quoted-exec              {color:#FF1493;}

emacs -q代わりにデフォルトのスタイルを使用できますcustom/theme.cssか?
CodyChan、2015年

デフォルトのスタイルは、現在のemacsテーマを使用することです。デフォルトのテーマの色を手動でコピーできますemacs_default_theme.css
Kaushal Modi

1
私はこれを試していませんがorg-html-fontify-code、フォント化の前にデフォルトのテーマを設定してから、以前のテーマを復元するように再定義できます。
Kaushal Modi、2015

orgモードno-theme-inheritが#+ BEGIN_SRCへの引数を受け入れた場合、たとえば#+BEGIN_SRC haskell no-theme-inherit .. #+END_SRC、コードに対してemacsのデフォルトのフォント化情報(この場合はHaskell)を使用した場合に非常に役立ちます。
Rob Stewart

上記のcssには通常のコードテキストのエントリがなく、単に黒く表示されることを指摘しておきます。そのエントリを見つけるとよいでしょう。たとえば、pre span.org-function-name {color:rgb(255,000,255);}のように、すべてのエントリをカスタマイズできますが、ほとんどのコードの黒色を変更できません。どのspan.org-??? それは?
スティーブ

2

色の問題の簡単な解決策/回避策を見つけました。エクスポートする前M-x customize-themesに、leuvenテーマを入力してオンにします。白い紙にコードを印刷するのに適しているように見える明るい背景のテーマです。エクスポート後、テーマを再びオフにすると、元の色に戻ります。

どういうわけか、エクスポートのために構成を切り替える複雑な方法を考え出す必要があると思いました。

これを頻繁に行う場合は、HTMLエクスポート関数にこれを自動的に行うようにアドバイスすることをお勧めします。

(defvar my-org-html-export-theme 'tsdh-light)

(defun my-with-theme (orig-fun &rest args)
  (load-theme my-org-html-export-theme)
  (unwind-protect
      (apply orig-fun args)
    (disable-theme my-org-html-export-theme)))

(with-eval-after-load "ox-html"
  (advice-add 'org-export-to-buffer :around 'my-with-theme))

はい、これでうまくいきます。ただし、HTMLに頻繁にエクスポートする多くのファイルを操作する場合、テーマを切り替えたり転送したりするのは非常に面倒です。
クリスチャンヘレンツ2017

1
はい、私は、エクスポート機能をアドバイスすることになった:github.com/legoscia/dotemacs/blob/master/...
legoscia

OK-また、解決策です。しかし、上記のルートをたどり、いくつかの明るいテーマに基づいたカスタムCSSを使用してみませんか?
クリスチャンヘレンツ

@legosciaこれは私にはうまくいかないようです。
stardiviner
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.