2.1 Cabal file

pandoc,
pandoc-types,
text,
base16-bytestring,
bytestring, 

2.2 Imports to site.hs

import qualified Data.ByteString.Char8 --for convert str to bytestr plantuml, requires cabal 'bytestring'
import Data.ByteString.Base16 (encode, decode) -- for encoding plantuml, requires cabal 'base16-bytestring' 
import Text.Pandoc.Walk --for post-processing pandoc, requires cabal 'pandoc-types'

3.1 Encoding and process to img

mhexCode :: Data.Text.Text -> String
mhexCode y = tail $ init ( show ( Data.ByteString.Base16.encode $ Data.ByteString.Char8.pack $ Data.Text.unpack y ))

planthtml :: Data.Text.Text -> Data.Text.Text 
--planthtml y = T.pack ("<figure><img src='http://www.plantuml.com/plantuml/svg/~h" <> (T.unpack $ hexCode y) <>"'></figure>") 
planthtml y = Data.Text.pack ("<figure><img src='http://www.plantuml.com/plantuml/svg/~h" <> (mhexCode $ y) <>"'></figure>") 

Above is our helper functions that will be used to generate the hex of our code.

example:
INPUT Markdown codeblock content : @startuml

1. Data.ByteString.Base16.encode - Convert @startuml to “407374617274756D6C”
2. intermediate hex result: “407374617274756D6C”
3. planthtml - Use hex result to create a ‘http://www.plantuml.com…’ img src DOM string.

Notice in the plantuml image link above http://www.plantuml.com/plantuml/svg/~h407374617274756d6c…
the string after “~h” begins with “407374617274756D6C” which is our result.

3.2 Pandoc Codeblock filtering + translation

Now we need to modify site.hs so that Hakyll will transform a PlantUML code block into a html img that links to the Planttext generated image.
We can do this with Hakyll’s Pandocs Filtering.

--Pandoc filtering, 
addToCodeBlock :: Pandoc -> Pandoc 
addToCodeBlock  = walk ftranslate 
  where ftranslate :: Block -> Block
        ftranslate (CodeBlock ("",["plantuml"],[]) txt ) = RawBlock (Format "html") (planthtml txt)
        ftranslate x = x 

ftranslate (CodeBlock ("",["plantuml"],[]) txt ) pattern matches CodeBlock objects in pandoc and finds “plantuml” annotations denoted by the Attr object ("",["plantuml"],[])
The Content of our CodeBlock is pattern matched as txt.

After pattern matching it converts it into a raw html block, and applies our “Code to Img DOM” transformation function planthtml on the content.

INPUT Markdown codeblock :

'''plantuml
@startuml  
Alice->Bob : I am using hex  
@enduml
'''

Output DOM element :