-
-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add style plugins for appending additional styles to theme (#25)
* Add inline style elements plugin * Add test case of inline style elements plugin (ignore in code) * Re-implement style elements plugin as a block rule * Fix style elements plugin to allow rough style element * Rename style elements plugin to style parse plugin * Add inlineStyle option to Marpit class * Add style assign plugin to assign parsed styles to property * Add test case of style assign plugin with #renderInline * Add appendStyle option to ThemeSet#pack * Add test case of inlineStyle option on Marpit class * Improve JSDoc * Update README.md to add the section how to tweak theme in Markdown * Update README.md to add note about tweaking slide size * Ignore invalid inline styles * [ci skip] Update CHANGELOG.md
- Loading branch information
Showing
10 changed files
with
353 additions
and
0 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
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
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,26 @@ | ||
| /** @module */ | ||
|
|
||
| /** | ||
| * Marpit style assign plugin. | ||
| * | ||
| * Assign style global directive and parsed styles to Marpit instance's | ||
| * `lastStyles' property. | ||
| * | ||
| * @alias module:markdown/style/assign | ||
| * @param {MarkdownIt} md markdown-it instance. | ||
| * @param {Marpit} marpit Marpit instance. | ||
| */ | ||
| function assign(md, marpit) { | ||
| md.core.ruler.push('marpit_style_assign', state => { | ||
| if (state.inlineMode) return | ||
|
|
||
| const directives = marpit.lastGlobalDirectives || {} | ||
| marpit.lastStyles = directives.style ? [directives.style] : [] | ||
|
|
||
| state.tokens.forEach(token => { | ||
| if (token.type === 'marpit_style') marpit.lastStyles.push(token.content) | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| export default assign |
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 @@ | ||
| /** @module */ | ||
| const styleMatcher = /<style[\s\S]*?>([\s\S]*?)<\/style>/i | ||
| const styleMatcherOpening = /^<style(?=(\s|>|$))/i | ||
| const styleMatcherClosing = /<\/style>/i | ||
|
|
||
| /** | ||
| * Marpit style parse plugin. | ||
| * | ||
| * Parse `<style>` elements as the hidden `marpit_style` token. The parsed style | ||
| * will use in {@link ThemeSet#pack} to append the style additionally. | ||
| * | ||
| * `<style>` elements will strip regardless of html setting provided by | ||
| * markdown-it. | ||
| * | ||
| * @alias module:markdown/style/parse | ||
| * @param {MarkdownIt} md markdown-it instance. | ||
| * @param {Marpit} marpit Marpit instance. | ||
| */ | ||
| function parse(md, marpit) { | ||
| /** | ||
| * Based on markdown-it html_block rule | ||
| * https://github.com/markdown-it/markdown-it/blob/master/lib/rules_block/html_block.js | ||
| */ | ||
| md.block.ruler.before( | ||
| 'html_block', | ||
| 'marpit_style_parse', | ||
| (state, startLine, endLine, silent) => { | ||
| if (!marpit.options.inlineStyle) return false | ||
|
|
||
| // Fast fail | ||
| let pos = state.bMarks[startLine] + state.tShift[startLine] | ||
| if (state.src.charCodeAt(pos) !== 0x3c) return false | ||
|
|
||
| let max = state.eMarks[startLine] | ||
| let line = state.src.slice(pos, max) | ||
|
|
||
| // Match to opening element | ||
| if (!styleMatcherOpening.test(line)) return false | ||
| if (silent) return true | ||
|
|
||
| // Parse ending element | ||
| let nextLine = startLine + 1 | ||
| if (!styleMatcherClosing.test(line)) { | ||
| while (nextLine < endLine) { | ||
| if (state.sCount[nextLine] < state.blkIndent) break | ||
|
|
||
| pos = state.bMarks[nextLine] + state.tShift[nextLine] | ||
| max = state.eMarks[nextLine] | ||
| line = state.src.slice(pos, max) | ||
| nextLine += 1 | ||
|
|
||
| if (styleMatcherClosing.test(line)) break | ||
| } | ||
| } | ||
|
|
||
| state.line = nextLine | ||
|
|
||
| // Create token | ||
| const token = state.push('marpit_style', '', 0) | ||
| token.map = [startLine, nextLine] | ||
| token.markup = state.getLines(startLine, nextLine, state.blkIndent, true) | ||
| token.hidden = true | ||
|
|
||
| const matchedContent = styleMatcher.exec(token.markup) | ||
| token.content = matchedContent ? matchedContent[1].trim() : '' | ||
|
|
||
| return true | ||
| } | ||
| ) | ||
| } | ||
|
|
||
| export default parse |
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
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,95 @@ | ||
| import assert from 'assert' | ||
| import dedent from 'dedent' | ||
| import MarkdownIt from 'markdown-it' | ||
| import applyDirectives from '../../../src/markdown/directives/apply' | ||
| import comment from '../../../src/markdown/comment' | ||
| import parseDirectives from '../../../src/markdown/directives/parse' | ||
| import slide from '../../../src/markdown/slide' | ||
| import styleAssign from '../../../src/markdown/style/assign' | ||
| import styleParse from '../../../src/markdown/style/parse' | ||
|
|
||
| describe('Marpit style assign plugin', () => { | ||
| const marpitStub = (...opts) => ({ | ||
| options: { inlineStyle: true }, | ||
| themeSet: new Map(), | ||
| ...opts, | ||
| }) | ||
|
|
||
| context('with inline style elements', () => { | ||
| const md = marpit => | ||
| new MarkdownIt('commonmark') | ||
| .use(styleParse, marpit) | ||
| .use(styleAssign, marpit) | ||
|
|
||
| it('assigns parsed styles to Marpit lastStyles property', () => { | ||
| const marpit = marpitStub() | ||
| md(marpit).render('<style>b { color: red; }</style>') | ||
|
|
||
| assert.deepStrictEqual(marpit.lastStyles, ['b { color: red; }']) | ||
| }) | ||
|
|
||
| it('ignores parsing style in #renderInline', () => { | ||
| const marpit = marpitStub() | ||
| const text = '<style>b { color: red; }</style>' | ||
|
|
||
| assert(md(marpit).renderInline(text) === text) | ||
| assert(!marpit.lastStyles) | ||
| }) | ||
| }) | ||
|
|
||
| context('with style global directive', () => { | ||
| const md = marpit => | ||
| new MarkdownIt('commonmark') | ||
| .use(comment) | ||
| .use(slide) | ||
| .use(parseDirectives, marpit) | ||
| .use(applyDirectives) | ||
| .use(styleAssign, marpit) | ||
|
|
||
| it('assigns parsed style global directive to Marpit lastStyles property', () => { | ||
| const marpit = marpitStub() | ||
| md(marpit).render(dedent` | ||
| <!-- | ||
| style: "b { color: red; }" | ||
| --> | ||
| `) | ||
|
|
||
| assert.deepStrictEqual(marpit.lastStyles, ['b { color: red; }']) | ||
| }) | ||
| }) | ||
|
|
||
| context('with muiltiple style elements and a style directive', () => { | ||
| const md = marpit => | ||
| new MarkdownIt('commonmark') | ||
| .use(comment) | ||
| .use(styleParse, marpit) | ||
| .use(slide) | ||
| .use(parseDirectives, marpit) | ||
| .use(applyDirectives) | ||
| .use(styleAssign, marpit) | ||
|
|
||
| it('assigns inline styles prior to directive style', () => { | ||
| const marpit = marpitStub() | ||
| md(marpit).render(dedent` | ||
| <style> | ||
| h2 { font-size: 2em; } | ||
| </style> | ||
| <style> | ||
| h3 { font-size: 1em; } | ||
| </style> | ||
| <!-- | ||
| style: |- | ||
| h1 { font-size: 3em; } | ||
| --> | ||
| `) | ||
|
|
||
| assert.deepStrictEqual(marpit.lastStyles, [ | ||
| 'h1 { font-size: 3em; }', | ||
| 'h2 { font-size: 2em; }', | ||
| 'h3 { font-size: 1em; }', | ||
| ]) | ||
| }) | ||
| }) | ||
| }) |
Oops, something went wrong.