Search code examples
javascriptmathlatexmarkdownwmd

Customizing MWD for math equations


HI,

I want to customize the WMD editor (or wmd-new) to convert TeX equations like $\frac{2}{3}$ to Google Charts API images (http://chart.apis.google.com/chart?chl=\frac{3}{2}&cht=tx)

Is it possible to customize how the HTML is generated?


Solution

  • I decided to use markitup with a python-markdown extension that I wrote. Here's the code for the Google App Engine parser:

    import markdown
    
    from urllib import urlencode
    from markdown.inlinepatterns import Pattern
    from google.appengine.ext import webapp
    
    LATEX_RE = r'\${2}([^$]+)\${2}'
    API_URL = 'http://chart.apis.google.com/chart?'
    
    class LatexPattern(Pattern):
        """
            Searchs for LaTex equations $$\latex$$ and
            returns img tags using google charts API
        """
    
        def handleMatch(self, m):
            el = markdown.etree.Element('img')
            src = API_URL + urlencode({
                'chl': m.group(2),
                'cht': 'tx'
            })
            el.set('src', src)
            el.set('alt', m.group(2))
            return el
    
    class LatexExtension(markdown.Extension):
        def extendMarkdown(self, md, md_globals):
            md.inlinePatterns.add(
                'latex',
                LatexPattern(LATEX_RE, self),
                '<automail'
            )
    
    class MarkdownHandler(webapp.RequestHandler):
        def post(self):
            data = self.request.get('data')
            extension = LatexExtension(configs=[])
            md = markdown.Markdown(extensions=[extension])
            html = md.convert(data)
            self.response.out.write(html)