-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
978 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
## Using Markdown-it with plugins | ||
|
||
If we had `npm`, here were the would-be configuration. | ||
|
||
```bash | ||
npm markdown-it@8.4.0 | ||
npm install @centerforopenscience/markdown-it-toc@1.1.1 | ||
npm install markdown-it-highlightjs@3.0.0 | ||
npm install markdown-it-ins-del@0.1.1 | ||
npm install markdown-it-sanitizer@0.4.3 | ||
npm install markdown-it-mathjax@2.0.0 | ||
``` | ||
|
||
For MFR, a customized local copy of each script is stored in the extension's static folder. There are a few issues: | ||
|
||
* MFR scripts run directly in the browser without Babel. For ES5 compatibility, developers must use [Babel](https://babeljs.io/repl/) to convert ES6 `markdown-it-highlightjs` to an ES5 version. | ||
|
||
* MFR does not use a package manager. Thus, `require` is **NOT** available. For the `viewer.mako` to be able to load these libraries, customization is necessary to export via `root.<PLUGIN_NAME>`. The main script in the `viewer.mako` uses `window.<PLUGIN_NAME>` to access them. `markdown-it` and `markdown-it-sanitizer` are already set up to be exported code. MFR loads the `min` version directly. `markdown-it-toc`, `markdown-it-highlightjs`, `markdown-it-ins-del` and `markdown-it-mathjax` are not. The following wrapper must be used. | ||
|
||
```javascript | ||
(function (root, factory) { | ||
if (typeof exports === "object") { | ||
module.exports = factory(); | ||
} else { | ||
root.<PLUGIN_NAME> = factory(); | ||
} | ||
}) (this, function () { | ||
return function(md/*, optional arguments*/) { | ||
/* library code */ | ||
} | ||
}); | ||
``` | ||
|
||
Here is a list of the original copies of the scripts: | ||
|
||
* [markdown-it@08.4.0](https://github.com/markdown-it/markdown-it/blob/8.4.0/bin/markdown-it.js) | ||
* [markdown-it-sanitizer@0.4.3](https://github.com/svbergerem/markdown-it-sanitizer/blob/v0.4.3/dist/markdown-it-sanitizer.min.js) | ||
* [markdown-it-mathjax@2.0.0](https://github.com/classeur/markdown-it-mathjax/blob/v2.0.0/markdown-it-mathjax.js) | ||
* [markdown-it-toc@1.1.1](https://github.com/cos-forks/markdown-it-toc/blob/1.1.1/index.js) | ||
* [markdown-it-ins-del@1.0.0](https://github.com/brianjgeiger/markdown-it-ins-del/blob/1.0.0/index.js) | ||
* [markdown-it-higlightjs@3.0.0](https://github.com/cslzchen/markdown-it-highlightjs/blob/release/3.0.0/index.es5.js) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
@charset "utf-8"; | ||
|
||
.mfrViewer { | ||
font-family: 'Open Sans'; | ||
padding: 1em; | ||
background: #fefefe; | ||
height: auto; | ||
word-wrap: break-word; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
/** | ||
* Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org> | ||
* | ||
* https://github.com/isagalaev/highlight.js/blob/9.12.0/src/styles/default.css | ||
*/ | ||
|
||
.hljs { | ||
display: block; | ||
overflow-x: auto; | ||
padding: 0.5em; | ||
background: #F0F0F0; | ||
} | ||
|
||
|
||
/* Base color: saturation 0; */ | ||
|
||
.hljs, | ||
.hljs-subst { | ||
color: #444; | ||
} | ||
|
||
.hljs-comment { | ||
color: #888888; | ||
} | ||
|
||
.hljs-keyword, | ||
.hljs-attribute, | ||
.hljs-selector-tag, | ||
.hljs-meta-keyword, | ||
.hljs-doctag, | ||
.hljs-name { | ||
font-weight: bold; | ||
} | ||
|
||
|
||
/* User color: hue: 0 */ | ||
|
||
.hljs-type, | ||
.hljs-string, | ||
.hljs-number, | ||
.hljs-selector-id, | ||
.hljs-selector-class, | ||
.hljs-quote, | ||
.hljs-template-tag, | ||
.hljs-deletion { | ||
color: #880000; | ||
} | ||
|
||
.hljs-title, | ||
.hljs-section { | ||
color: #880000; | ||
font-weight: bold; | ||
} | ||
|
||
.hljs-regexp, | ||
.hljs-symbol, | ||
.hljs-variable, | ||
.hljs-template-variable, | ||
.hljs-link, | ||
.hljs-selector-attr, | ||
.hljs-selector-pseudo { | ||
color: #BC6060; | ||
} | ||
|
||
|
||
/* Language color: hue: 90; */ | ||
|
||
.hljs-literal { | ||
color: #78A960; | ||
} | ||
|
||
.hljs-built_in, | ||
.hljs-bullet, | ||
.hljs-code, | ||
.hljs-addition { | ||
color: #397300; | ||
} | ||
|
||
|
||
/* Meta color: hue: 200 */ | ||
|
||
.hljs-meta { | ||
color: #1f7199; | ||
} | ||
|
||
.hljs-meta-string { | ||
color: #4d99bf; | ||
} | ||
|
||
|
||
/* Misc effects */ | ||
|
||
.hljs-emphasis { | ||
font-style: italic; | ||
} | ||
|
||
.hljs-strong { | ||
font-weight: bold; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
/** | ||
* Preset to use highlight.js with markdown-it. | ||
* | ||
* Origin: https://github.com/valeriangalliat/markdown-it-highlightjs/tree/v3.0.0/index.js | ||
* The above link gives a 404. Here is a forked copy and Babel-converted ES5 version: | ||
* (ES6) https://github.com/cslzchen/markdown-it-highlightjs/blob/release/3.0.0/index.js | ||
* (ES5) https://github.com/cslzchen/markdown-it-highlightjs/blob/release/3.0.0/index.es5.js | ||
* | ||
* Version: https://github.com/valeriangalliat/markdown-it-highlightjs/releases/tag/v3.0.0 | ||
*/ | ||
|
||
(function (root, factory) { | ||
if (typeof exports === "object") { | ||
module.exports = factory(); | ||
} else { | ||
root.markdownitHightlightjs = factory(); | ||
} | ||
})(this, function () { | ||
|
||
"use strict"; | ||
|
||
var maybe = function maybe(f) { | ||
try { | ||
return f(); | ||
} catch (e) { | ||
return false; | ||
} | ||
}; | ||
|
||
// Highlight with given language. | ||
var highlight = function highlight(code, lang) { | ||
return maybe(function () { | ||
return hljs.highlight(lang, code, true).value; | ||
}) || ""; | ||
}; | ||
|
||
// Highlight with given language or automatically. | ||
var highlightAuto = function highlightAuto(code, lang) { | ||
return lang ? highlight(code, lang) : maybe(function () { | ||
return hljs.highlightAuto(code).value; | ||
}) || ""; | ||
}; | ||
|
||
// Wrap a render function to add `hljs` class to code blocks. | ||
var wrap = function wrap(render) { | ||
return function () { | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
|
||
return render.apply(this, args).replace("<code class=\"", "<code class=\"hljs ").replace("<code>", "<code class=\"hljs\">"); | ||
}; | ||
}; | ||
|
||
var defaults = { | ||
auto: true, | ||
code: true | ||
}; | ||
|
||
return function(md, opts) { | ||
|
||
opts = Object.assign({}, defaults, opts); | ||
|
||
md.options.highlight = opts.auto ? highlightAuto : highlight; | ||
md.renderer.rules.fence = wrap(md.renderer.rules.fence); | ||
|
||
if (opts.code) { | ||
md.renderer.rules.code_block = wrap(md.renderer.rules.code_block); | ||
} | ||
}; | ||
|
||
}); |
Oops, something went wrong.