Tim’s
Bandwagon

Preview Markdown Documents in BBEdit

A quickie: here’s a way of directly previewing Markdown documents in the BBEdit preview window using PHP. (Inspired by this Python method that does the same thing).

  1. Make a template file (you’ll probably want to add some styles to this).

    ~/Sites/markdown-preview/template.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
            "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Markdown Preview</title>
    </head>
    <body>
    ##markdown##
    </body>
    </html>
  2. Make the php file, and follow the instructions in the PHP comments.

    ~/Sites/markdown-preview/index.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
    <?php
     
    /*
     * Download these and put them somewhere in your php path:
     *
     *     <a href="http://www.michelf.com/projects/php-markdown/">http://www.michelf.com/projects/php-markdown/</a>
     *     <a href="http://www.michelf.com/projects/php-smartypants/">http://www.michelf.com/projects/php-smartypants/</a>
     */
    include_once 'markdown.php';
    include_once 'smartypants.php';
     
    /*
     * You'll need to change this:
     */
    $markdownDocsDir = isset ($_SERVER['MARKDOWN_DOCS_DIR']) ? $_SERVER['MARKDOWN_DOCS_DIR'] : '/Users/username/Documents';
     
    /*
     * You'll need to set up BBEdit to use something like this as the Preview Server URL:
     *
     *     http://localhost/markdown-preview/?file=/
     */
    $file = $_GET['file'];
    $text = file_get_contents ($markdownDocsDir . $file);
    $formatted = SmartyPants(Markdown($text), '2');
     
    /*
     * Display the formatted text via a simple template.
     */
    $templateFile = './template.html';
    $templateText = file_exists ($templateFile) ? file_get_contents ($templateFile) : "##markdown##";
    echo (str_replace ('##markdown##', $formatted, $templateText));
     
    ?>

Leave a Comment

Your personal information

Your comment