add citation in markdown

README.md

@@ -17,3 +17,13 @@ npm start
 ## Why elm?
 
 ¯\_(ツ)_/¯
+
+Writing web application with types. Although it would make you go insane rather than make the job done for you.
+
+## Citing in Markdown
+
+Use HTML tag `<cite>` with attribute `ref` as the content of the citation.
+
+```md
+Some paper<cite ref="name of paper, authors, conference and journal"/>
+```

src/TailwindMarkdownRenderer.elm

@@ -3,7 +3,7 @@ module TailwindMarkdownRenderer exposing (renderer)
 import Css
 import Ellie
 import Html.Styled as Html
-import Html.Styled.Attributes as Attr exposing (css)
+import Html.Styled.Attributes as Attr exposing (css, class)
 import Markdown.Block as Block
 import Markdown.Html
 import Markdown.Renderer
@@ -116,6 +116,14 @@ renderer =
                     Ellie.outputTabElmCss ellieId
                 )
                 |> Markdown.Html.withAttribute "id"
+            , Markdown.Html.tag "cite"
+                (\ref _ ->
+                    Html.span []
+                    [ Html.label [ class "sidenote-number" ] []
+                    , Html.span [ class "sidenote" ] [ Html.text ref ]
+                    ]
+                )
+                |> Markdown.Html.withAttribute "ref"
             ]
     , codeBlock = codeBlock