1

My org version is 9.1.14.

Background info:

I am trying to export my notes in org-mode to html. I would like to have my notes tagged with Category and Tags. I want to apply some CSS beautification to the exported properties. All I get now is a simple export of properties wrapped in <p> tag.

The problem:

I have the following org content:

:PROPERTIES:
:Date:     2018-09-15 Sat
:Author:   somebody
:Category: ideas
:END:

It gets exported as below html code:

<p>
:Date:     2018-09-15 Sat
:Author:   somebody
:Category: ideas
</p>

I want to apply pretty CSS to the properties exported and I expect the export to be something like

<div class="properties">
<ul>
    <li>:Date:     2018-09-15 Sat</li>
    <li>:Author:   somebody</li>
    <li>:Category: ideas</li>
</ul>
</div>

How can I achieve that? or is there any other better way to achieve a neat CSS formatted properties listing?

0
+50

The lazy way is to override the relevant functions from the org-html exporter by advices. Put the following stuff into your init-file and restart emacs. You should get quite exactly what you want.

(defun my-org-html-property-drawer (_property-drawer contents _info)
  "Transcode a PROPERTY-DRAWER element from Org to HTML.
CONTENTS holds the contents of the drawer.  INFO is a plist
holding contextual information."
  (when (org-string-nw-p contents)
    (format "<div class=\"properties\">
<ul>
%s
</ul>
</div>" contents)))

(defun my-org-html-node-property (node-property _contents _info)
  "Transcode a NODE-PROPERTY element from Org to HTML.
CONTENTS is nil.  INFO is a plist holding contextual
information."
  (format "<li>:%s:\t%s</li>"
          (org-element-property :key node-property)
          (let ((value (org-element-property :value node-property)))
            (if value (concat " " value) ""))))

(defun my-org-html-setup ()
  "My modifications of the org-html exporter."
  (advice-add 'org-html-property-drawer :override #'my-org-html-property-drawer)
  (advice-add 'org-html-node-property :override #'my-org-html-node-property))

(eval-after-load "ox-html" #'my-org-html-setup)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.