{"id":3629,"date":"2020-05-26T15:54:56","date_gmt":"2020-05-26T21:54:56","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3629"},"modified":"2022-07-11T11:04:49","modified_gmt":"2022-07-11T17:04:49","slug":"extending-parsedown-block-elements","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2020\/05\/26\/extending-parsedown-block-elements\/","title":{"rendered":"Extending Parsedown: Block elements"},"content":{"rendered":"

Continuing work on extending Parsedown<\/a>.<\/p>\n

See the actual code<\/a>.<\/p>\n

Adding block-level elements is not much different from adding inline elements<\/a>. Kavanot.name<\/a> originally used <footer><\/code> elements to indicate the source of a block quote:<\/p>\n

<blockquote>\r\n    Do or do not. There is no try.\r\n  <\/blockquote>\r\n  <footer>Yoda<\/footer>\r\n<\/blockquote>\r\n<\/code><\/pre>\n
While marking blockquotes this way is now acceptable<\/a>, for a long time it wasn't, and the recommended way<\/a> was with <figure> and <figcaption><\/code>. KavanotParsedown uses the latter model:<\/p>\n
<figure>\r\n  <blockquote>\r\n    Do or do not. There is no try.\r\n  <figcaption>Yoda<\/figcaption>\r\n<figure>\r\n<\/code><\/pre>\n
But I start with creating a <footer><\/code> and then modifying the DOM. So I want to have a block element that I will indicate with \"--\"<\/code> at the start of the line.<\/p>\n
function __construct(){\r\n  $this->BlockTypes['-'][] = 'Source'; \/\/ only line needed to indicate a block level element\r\n  \/\/ ... rest of the constructor\r\n}\r\n\r\nprotected function blockSource($Line, $Block = null){\r\n  if (preg_match('\/^--[ ]*(.+)\/', $Line['text'], $matches)) {\r\n    return array(\r\n      'element' => array(\r\n        'name' => 'footer',\r\n        'handler' => array(\r\n          'function' => 'lineElements',\r\n          'argument' => $matches[1],\r\n          'destination' => 'elements'\r\n        ),\r\n        'attributes' => array('class' => 'source') \/\/ for styling, add a class automatically\r\n      )\r\n    );\r\n  }\r\n}\r\n\r\n<\/code><\/pre>\n
so <\/p>\n
>Do or do not. There is no try.\r\n--Yoda<\/code><\/pre>\n
becomes<\/p>\n
<blockquote>\r\n    Do or do not. There is no try.\r\n  <footer class=\"source\" >Yoda<\/footer>\r\n<\/blockquote><\/code><\/pre>\n
I realized that I might want to add an attribution to an image as well, without it being in a <blockquote><\/code>, as <\/p>\n
<p>\r\n  <img src=\/blog\/blogfiles\/pdf\/smiley.png alt=\"Smile!\"\/>\r\n  <footer class=\"source\" >Some file I found on the web<\/footer>\r\n<\/p>\r\n<\/code><\/pre>\n
But as it stands, <\/p>\n
[Smile!](\/blog\/blogfiles\/pdf\/smiley.png)\r\n--Some file I found on the web<\/code><\/pre>\n
doesn't work; the <p><\/code> ends before the <footer><\/code> starts:<\/p>\n
<p>\r\n  <img src=\/blog\/blogfiles\/pdf\/smiley.png alt=\"Smile!\"\/>\r\n<\/p>\r\n<footer class=\"source\" >Some file I found on the web<\/footer>\r\n<\/code><\/pre>\n
so we need to check that the previous block wasn't a paragraph. If it was, then parse this line and add it to the paragraph as an internal element:<\/p>\n
protected function blockSource($Line, $Block = null){\r\n  if (preg_match('\/^--[ ]*(.+)\/', $Line['text'], $matches)) {\r\n    if ($Block && $Block['type'] === 'Paragraph'){\r\n      $Block['element']['handler']['argument'] .= \"\\n\".$this->element($this->blockSource($Line)['element']);\r\n      return $Block;\r\n    }\r\n    return array(\r\n      'element' => array(\r\n        'name' => 'footer',\r\n        'handler' => array(\r\n          'function' => 'lineElements',\r\n          'argument' => $matches[1],\r\n          'destination' => 'elements'\r\n        ),\r\n        'attributes' => array('class' => 'source') \/\/ for styling, add a class automatically\r\n      )\r\n    );\r\n  }\r\n}<\/code><\/pre>\n
and now it works, except that the footer is a child of the <p><\/code> instead of the <blockquote><\/code>. We'll have to fix that.<\/p>\n","protected":false},"excerpt":{"rendered":"
Continuing work on extending Parsedown. See the actual code. Adding block-level elements is not much different from adding inline elements. Kavanot.name originally used <footer> elements to indicate the source of a block quote: <blockquote> Do or do not. There is no try. <\/blockquote> <footer>Yoda<\/footer> <\/blockquote> While marking blockquotes this way is now acceptable, for a […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,9],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3629"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3629"}],"version-history":[{"count":8,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3629\/revisions"}],"predecessor-version":[{"id":3638,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3629\/revisions\/3638"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}