How to add CSS support for the html-export in org mode for the properties drawer?

Question

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?

Answer 1

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)