git.oblomov.eu Git - ikiwiki/blob - doc/todo/mdwn_preview.mdwn

   1 The [StackOverflow](http://stackoverflow.com/) site uses markdown for markup.
   2 It has a fancy javascript thing for showing a real-time preview of what the user
   3 is editing. It would be nice if ikiwiki could support this, too. The thing they
   4 use on StackOverflow is supposed to be free software, so it should be easy to
   5 add to ikiwiki.
   6
   7 > See [[wikiwyg]]. Note that I do not have a copy of the code for that, or
   8 > it'd be in ikiwiki already. --[[Joey]]
   9
  10 >> I just had a brief look at the [[wikiwyg]] page and the link to the plugin was
  11 >> broken.  The StackOverflow site uses the [WMD](http://wmd-editor.com/) editor,
  12 >> which seems to be related to the [ShowDown](http://attacklab.net/showdown/)
  13 >> javascript port of Markdown.  Interestingly, [WMD source](http://wmd.googlecode.com/)
  14 >> is now available under an MIT license, though it is supposedly undergoing heavy
  15 >> refactoring.  It looks like there was previous discussion ( [[todo/Add_showdown_GUI_input__47__edit]] )
  16 >> about a showdown plugin.  Maybe a WMD plugin would be worthwhile.  I might
  17 >> look into it if I have time on the weekend. -- [[Will]]
  18
  19 [[!tag wishlist]]
  20
  21 >>> Below is a simple plugin/[[patch]] to make use of the WMD editor.  Turns out it isn't hard at all to
  22 >>> get a basic version going (that don't handle directives at all).  I've
  23 >>> removed the done tag so this is visible as a patch. -- [[Will]]
  24
  25 ------
  26
  27 ### Instructions:
  28
  29
  30 Download the [WMD source](http://wmd-editor.com/downloads/wmd-1.0.1.zip).  In that zip file you'll
  31 find a few example html files, a readme and `wmd` directory.  Move the `wmd` directory into the
  32 ikiwiki `underlays` directory.  You should now have an `underlays/wmd/wmd.js` file as well as
  33 some other javascript files and an images directory in the same place.
  34
  35 Note that the WMD plugin does **not** handle directives.  For this reason the normal `preview` button
  36 remains.  Some CSS to clean up the display of the live WMD preview would be good.
  37
  38 Install the following patch and plugin file.  Then enable the 'wmd' plugin.
  39
  40
  41     diff --git a/templates/editpage.tmpl b/templates/editpage.tmpl
  42     index 4b54db2..b1cf015 100644
  43     --- a/templates/editpage.tmpl
  44     +++ b/templates/editpage.tmpl
  45     @@ -37,6 +37,7 @@ Optional comment about this change:<br />
  46      </div>
  47      </TMPL_IF>
  48      <TMPL_VAR FORM-END>
  49     +<TMPL_VAR WMD_PREVIEW>
  50
  51      <TMPL_IF NAME="PAGE_PREVIEW">
  52      <hr />
  53
  54 -----
  55
  56     #!/usr/bin/perl
  57     package IkiWiki::Plugin::wmd;
  58
  59     use warnings;
  60     use strict;
  61     use IkiWiki 3.00;
  62     use POSIX;
  63     use Encode;
  64
  65     sub import {
  66         add_underlay("wmd");
  67         hook(type => "getsetup", id => "wmd", call => \&getsetup);
  68         hook(type => "formbuilder_setup", id => "wmd", call => \&formbuilder_setup);
  69     }
  70
  71     sub getsetup () {
  72         return
  73                 plugin => {
  74                         safe => 1,
  75                         rebuild => 1,
  76                 },
  77     }
  78
  79     sub formbuilder_setup (@) {
  80         my %params=@_;
  81         my $form=$params{form};
  82
  83         return if ! defined $form->field("do");
  84
  85         return unless (($form->field("do") eq "edit") ||
  86                                 ($form->field("do") eq "create"));
  87
  88         $form->tmpl_param("wmd_preview", "<div class=\"wmd-preview\"></div>\n".include_javascript(undef, 1));
  89     }
  90
  91     sub include_javascript ($;$) {
  92         my $page=shift;
  93         my $absolute=shift;
  94
  95         return '<script src="'.urlto("wmd.js", $page, $absolute).
  96                 '" type="text/javascript"></script>'."\n";
  97     }
  98
  99     1
 100