{"id":1493,"date":"2020-05-29T11:31:00","date_gmt":"2020-05-29T04:31:00","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1493"},"modified":"2020-06-21T09:25:04","modified_gmt":"2020-06-21T02:25:04","slug":"markdown-comment-without-plugin","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/markdown-comment-without-plugin\/","title":{"rendered":"How to Allow Markdown in Comment without Plugin"},"content":{"rendered":"\n

Comment form in WordPress is… adequate. It does its job but leaves a lot of room for improvement. And our first improvement is implementing better formatting like Markdown.<\/p>\n\n\n\n

Markdown <\/strong>is a syntax for simple formatting. For example **this text**<\/code> becomes bold and *this one*<\/code> becomes italic.<\/p>\n\n\n\n

Let’s implement it:<\/p>\n\n\n\n

Step 1: Check if your theme uses comment_text()<\/h2>\n\n\n\n

Open comments.php<\/code> in your theme and check how does it outputs the comment content. Does it uses comment_text()<\/code>?<\/p>\n\n\n\n

Yes?<\/strong> Proceed to next step.<\/p>\n\n\n\n

No?<\/strong> Then you need to wrap the code like shown below:<\/p>\n\n\n\n

...\n\n\/\/ If original code is like this:\necho $comment->comment_content\n\n\/\/ Wrap it like this:\necho apply_filters( 'comment_text', $comment->comment_content );<\/code><\/pre>\n\n\n\n
Step 2: Add Markdown parser<\/h2>\n\n\n\n
Hook into comment_text<\/code> and apply the Markdown while removing the other filters.<\/p>\n\n\n\n
add_action( 'wp', 'comment_md_init', 9999 ); \n\nfunction comment_md_init() {\n  global $post;\n\n  \/\/ abort if in blog page or no comment yet\n  if( is_home() || $post->comment_count <= 0 ) { return; }\n\n  require_once 'parsedown.php'; \/\/ download the file below\n\n  \/\/ Remove escaping some symbols\n  remove_filter( 'comment_text', 'wptexturize', 10 );\n\n  \/\/ Remove auto anchor link\n  remove_filter( 'comment_text', 'make_clickable', 9 );\n\n  \/\/ Remove auto <p> tag\n  remove_filter( 'comment_text', 'wpautop', 30 );\n\n  \/\/ Markdown formatting\n  add_filter( 'comment_text', 'comment_md_format' );\n}\n\n\/\/ Format the markdown\nfunction comment_md_format( $text ) {\n  $pd = new \\Parsedown();\n  return $pd->text( $text );\n}<\/code><\/pre>\n\n\n\n
\n
Get parsedown.php<\/a><\/div>\n<\/div>\n\n\n\n
Step 3: Try it Out<\/h2>\n\n\n\n
Here’s a Markdown Cheatsheet<\/a>. Go try some in your comment form.<\/p>\n\n\n\n
\"\"
Writing comment with Markdown syntax<\/figcaption><\/figure>\n\n\n\n
\"\"
When posted, the Markdown comment is successfully parsed<\/figcaption><\/figure>\n\n\n\n
Done!<\/strong> You might need to change the CSS to make it looks better.<\/p>\n\n\n\n
Doesn’t Work or Formatting Messy?<\/h3>\n\n\n\n
Check if there’s another filter that overrides your parser. At the bottom of your comment_md_init<\/code> function, add this snippet:<\/p>\n\n\n\n
\/\/ at the bottom of comment_md_init() function\nglobal $wp_filter;\nvar_dump( $wp_filter['comment_text'] );<\/code><\/pre>\n\n\n\n
Refresh your page and see the order of filters. Remove the one that you think is the problem and try again.<\/p>\n\n\n\n
\n\n\n\n
Step 4 (Optional): Let the visitors know that it supports Markdown<\/h3>\n\n\n\n
Below are two recommended ways to do it, pick one:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
OPTION A<\/strong> – Simple Text<\/h4>\n\n\n\n
This is as simple as it gets. Feel free to change the text.<\/p>\n\n\n\n
add_filter( 'comment_form_defaults', 'comment_md_add_guide' );\n\nfunction comment_md_add_guide( $defaults ) {\n  $icon = '<svg width=\"20px\" height=\"15px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\">\n  <path d=\"M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z\"\/>\n  <\/svg>';\n\n  $text = 'This form supports markdown. <a href=\"https:\/\/commonmark.org\/help\/\" target\"_blank\">Read guide \u00bb<\/a>';\n\n  $guide = \"<p class='comment-md-guide'> $icon <span> $text <\/span> <\/p>\";\n\n  $defaults['comment_notes_after'] .= $guide;\n  return $defaults;\n}<\/code><\/pre>\n\n\n\n
OPTION B<\/strong> – Editor Toolbar<\/h4>\n\n\n\n
The snippet below will apply hEditor<\/a> to the comment form. It’s a very lightweight script and the same one used by our comment form.<\/p>\n\n\n\n
add_action( 'wp_enqueue_scripts', 'comment_md_enqueue_toolbar', 9999 );\n\nfunction comment_md_enqueue_toolbar() {\n  global $post;\n\n  \/\/ If comment is open\n  if( isset( $post->comment_status ) && $post->comment_status == 'open' ) {\n    wp_enqueue_style( 'h-editor', 'https:\/\/hrsetyono.github.io\/cdn\/h-editor.css', [] );\n    wp_enqueue_script( 'h-editor', 'https:\/\/hrsetyono.github.io\/cdn\/h-editor-wp.js', [], null, true );\n\n    wp_localize_script( 'h-editor', 'localizeEditor', [\n      'textareaSelector' => '#comment',\n      'buttons' => [ 'bold', 'italic', 'link', '|', 'bullist', 'numlist', 'quote', '|', 'undo' ],\n      \/\/ Other buttons:\n      \/\/ h1, h2, h3, image, code, pre, hr, strike, redo\n    ] );\n  }\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
I hope Markdown can be natively supported for Comment. But for now, we can use this tutorial which doesn’t leave any noticeable footprint. Especially if you pick Option A in Step 4.<\/p>\n\n\n\n
Also do not be afraid of implementing this on a non-techie website. Even if they don’t use any Markdown, it still functions like the old comment form.<\/p>\n\n\n\n
Let me know if you have trouble or suggestion in the comment below \ud83d\ude42<\/p>
<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Comment form in WordPress is… adequate. It does its job but has a lot of room for improvement. And our first step is implementing better formatting like Markdown.<\/p>\n","protected":false},"author":1,"featured_media":1504,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[42,31],"class_list":["post-1493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","tag-markdown","tag-php"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1493"}],"version-history":[{"count":9,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1493\/revisions"}],"predecessor-version":[{"id":1513,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1493\/revisions\/1513"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1504"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}