Using Jetpack’s markdown on custom fields


Jetpack’s markdown module is easy way to add markdown to WordPress. If your not familiar with markdown then this is a good starting point. Out of the box you can use this on any WordPress page or post. Recently I was curious if I could use Jetpack’s markdown other places like custom fields. Turns out, yes and it’s not that difficult.

Markdown turns textareas into powerful inputs

Sometimes a full blown text editor is overkill. Using markdown with a simple textarea box is more accessible on devices like phones. On the logged in portion of anchor.host I created a custom internal logging system. It uses ACF’s front end forms to input info without interacting with the WordPress backend. The main description textarea box has markdown enabled. The following input:

Screen Shot 2016-11-17 at 4.03.23 PM.png

Will produce the following output:

Screen Shot 2016-11-17 at 4.04.11 PM.png

Since markdown is simply text content, the only custom part happens when displaying the custom field. The following code uses Jetpack’s markdown to output the ACF textarea field in markdown.

<?php
jetpack_require_lib( 'markdown' );
$desc = get_field('description', $process_log->ID);

if ($desc) { ?>
<div class="desc">
  <?php echo WPCom_Markdown::get_instance()->transform( $desc, array('id'=>false,'unslash'=>false)); ?>
</div>
<?php } ?>