Merge pull request #321 from steinwaywhw/feature

Katex Support
joemccann · May 25, 2015 · ac77df4 · ac77df4
2 parents fafc1e1 + 7c0ff89
commit ac77df4
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,19 @@
     "googleapis": "0.2.12-alpha",
     "highlight.js": "^8.3.0",
     "jquery": "^2.1.1",
+    "katex": "^0.2.0",
     "keymaster": "^1.6.2",
+    "markdown-it": "^4.2.1",
+    "markdown-it-abbr": "^1.0.0",
+    "markdown-it-checkbox": "^1.1.0",
+    "markdown-it-deflist": "^1.0.0",
+    "markdown-it-footnote": "^1.0.0",
+    "markdown-it-ins": "^1.0.0",
+    "markdown-it-mark": "^1.0.0",
+    "markdown-it-math": "^2.0.1",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
+    "markdown-it-toc": "^1.1.0",
     "marked": "^0.3.2",
     "rc": "0.3.0",
     "request": "^2.44.0"
@@ -74,6 +86,7 @@
     "gulp-uncss": "^0.5.1",
     "gulp-util": "^3.0.1",
     "jshint-stylish": "^1.0.0",
+    "json-loader": "^0.5.1",
     "karma": "^0.12.24",
     "karma-chrome-launcher": "^0.1.5",
     "karma-jasmine": "^0.1.5",

diff --git a/plugins/core/core.js b/plugins/core/core.js
@@ -2,39 +2,22 @@ var fs = require('fs')
   , path = require('path')
   , request = require('request')
   , qs = require('querystring')
-  , markdown = require('marked')
   , phantomjs = require('phantomjs')
   , child = require('child_process')
-  , hljs = require('highlight.js');
-
-markdown.setOptions({
-  gfm: true,
-  tables: true,
-  pedantic: false,
-  sanitize: true,
-  smartLists: true,
-  smartypants: false,
-  langPrefix: 'lang-',
-  highlight: function (code, lang, etc) {
-    if (hljs.getLanguage(lang)) {
-      code = hljs.highlight(lang, code).value;
-    }
-    return code;
-  }
-})
+  , md = require('./markdown-it.js').md;
 
 
 exports.Core = (function(){
 
   function _getFullHtml(name, str, style){
     return '<!DOCTYPE html><html><head><meta charset="utf-8"><title>'
       + name + '</title><style>'
-      + ( ( style ) ? style : '' ) + '</style></head><body>\n'
-      + markdown(str) + '\n</body></html>';
+      + ( ( style ) ? style : '' ) + '</style></head><body id="preview">\n'
+      + md.render(str) + '\n</body></html>';
   }
 
   function _getHtml(str){
-    return markdown(str)
+    return md.render(str)
   }
 
   return {
@@ -178,7 +161,8 @@ exports.Core = (function(){
       , error: false
       }
 
-      var html = _getFullHtml(req.body.name, unmd)
+      var format = fs.readFileSync( path.resolve(__dirname, '../../public/css/app.css') ).toString('utf-8')
+      var html = _getFullHtml(req.body.name, unmd, format)
       var temp = path.resolve(__dirname, '../../public/files/pdf/temp.html')
 
       fs.writeFile( temp, html, 'utf8', function(err, data){

diff --git a/plugins/core/markdown-it.js b/plugins/core/markdown-it.js
@@ -0,0 +1,49 @@
+'use strict';
+
+
+var hljs = require('highlight.js')
+  , katex = require('katex')
+  , md = require('markdown-it')({
+      linkify: true,
+      typographer: true,
+      highlight: function (str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          return hljs.highlight(lang, str).value;
+        } else {
+          return hljs.highlightAuto(str).value;
+        }
+      }
+    });
+
+/*
+  change to Katex for math rendering
+ */
+md.use(require('markdown-it-math'), {
+  inlineRenderer: function (str) {
+    try {
+      return '<span class="math inline">' + katex.renderToString (str) + '</span>';
+    } catch (e) {
+      return '<span class="math inline">' + e + '</span>';
+    }
+  },
+  blockRenderer: function (str) {
+    try {
+      return '<span class="math block">' + katex.renderToString (str) + '</span>';
+    } catch (e) {
+      return '<span class="math block">' + e + '</span>';
+    }
+  }
+});
+
+md
+  .use(require('markdown-it-toc'))
+  .use(require('markdown-it-footnote'))
+  .use(require('markdown-it-sub'))
+  .use(require('markdown-it-sup'))
+  .use(require('markdown-it-mark'))
+  .use(require('markdown-it-deflist'))
+  .use(require('markdown-it-ins'))
+  .use(require('markdown-it-abbr'))
+  .use(require('markdown-it-checkbox'));
+
+exports.md = md 
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/components/preview.directive.js b/public/js/components/preview.directive.js
@@ -1,22 +1,8 @@
 
 'use strict';
 
-var
-  marked = require('marked'),
-  hljs = require('highlight.js');
-
-marked.setOptions({
-  gfm: true,
-  tables: true,
-  pedantic: false,
-  sanitize: true,
-  smartLists: true,
-  smartypants: false,
-  langPrefix: 'lang-',
-  highlight: function(code) {
-    return hljs.highlightAuto(code).value;
-  }
-});
+var md = require( 'md' ).md
+
 
 module.exports =
   angular
@@ -27,7 +13,7 @@ module.exports =
     link: function(scope, el, attrs) {
 
       var refreshPreview = function(val) {
-        el.html(marked($rootScope.editor.getSession().getValue()));
+        el.html(md.render($rootScope.editor.getSession().getValue()));
         return $rootScope.$emit('preview.updated');
       };
 

diff --git a/public/scss/app.scss b/public/scss/app.scss
@@ -13,6 +13,7 @@
 @import 'vendor/sass-list-maps/sass-list-maps';
 
 // Third-party style imports, if needed
+@import 'http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.css';
 @import 'vendor/bourbon/functions/modular-scale';
 @import 'vendor/bootstrap-sass-3.2.0/assets/stylesheets/bootstrap';
 @import 'vendor/highlight.js/solarized-dark';

diff --git a/public/scss/foundation/_base.scss b/public/scss/foundation/_base.scss
@@ -47,7 +47,6 @@ p {
 }
 
 pre {
-  // @include fontsize(zeta, all);
   @include sp(zeta, $bodytype, 2, 2, all);
   line-height: 2rem;
   background: linear-gradient(

diff --git a/public/scss/structures/_split.scss b/public/scss/structures/_split.scss
@@ -66,8 +66,8 @@
   &-preview {
     background-color: #fff;
     display: none;
-    position: absolute;
-    top: 129px;
+    top: 0;
+    position: relative;
     z-index: map-get($z-index, preview);
 
     .show-preview & {
@@ -79,7 +79,7 @@
       float: right;
       height: calc(100vh - 130px);
       -webkit-overflow-scrolling: touch;
-      position: static;
+      position: relative;
       top: 0;
       width: 50%;
     }

diff --git a/views/index.ejs b/views/index.ejs
@@ -43,6 +43,8 @@
   <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
   <link href="/css/app.css" rel="stylesheet">
 
+
+
 </head>
 <body ng-controller="Base">
 

diff --git a/views/navbar.ejs b/views/navbar.ejs
@@ -9,18 +9,18 @@
   <nav class="nav nav-right">
     <ul class="menu menu-utilities">
       <li class="menu-item menu-item--export-as has-dropdown" dropdown>
-        <a class="dropdown-toggle">Export as <span class="caret"></span></a>
+        <a class="dropdown-toggle" dropdown-toggle>Export as <span class="caret"></span></a>
         <%- include dropdowns/export_as %>
       </li>
       <li class="menu-item menu-item--save-to has-dropdown" dropdown>
-        <a class="dropdown-toggle">Save to <span class="caret"></span></a>
+        <a class="dropdown-toggle" dropdown-toggle>Save to <span class="caret"></span></a>
 
         <ul class="dropdown dropdown-menu" role="menu">
           <%- include dropdowns/save_to %>
         </ul>
       </li>
       <li class="menu-item menu-item--import-from has-dropdown" dropdown>
-        <a class="dropdown-toggle">Import from <span class="caret"></span></a>
+        <a class="dropdown-toggle" dropdown-toggle>Import from <span class="caret"></span></a>
 
         <ul class="dropdown dropdown-menu" role="menu">
           <%- include dropdowns/import_from %>

diff --git a/webpack.config.js b/webpack.config.js
@@ -22,13 +22,19 @@ module.exports = {
         test: /\.css$/,
         loader: 'style-loader!css-loader',
         exclude: /node_modules/
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
       }
     ]
   },
   resolve: {
-    extensions: ['', '.webpack.js', '.web.js', '.js'],
+    modulesDirectories: ['node_modules', 'plugins'],
+    extensions: ['', '.webpack.js', '.web.js', '.js'], 
     alias: {
-      'angular': 'angular/angular'
+      'angular': 'angular/angular',
+      'md': 'core/markdown-it'
     }
   },
   resolveLoader: {