New GitHub ExtensionSet; example site supports ExtensionSets! (dart-lang/markdown#132)
diff --git a/pkgs/markdown/CHANGELOG.md b/pkgs/markdown/CHANGELOG.md index 1a17056..fffe73e 100644 --- a/pkgs/markdown/CHANGELOG.md +++ b/pkgs/markdown/CHANGELOG.md
@@ -4,8 +4,8 @@ * `dart bin/markdown.dart --version` now shows the package version number. * The playground app now shows the version number. * Improve autolink parsing. -* Added new table syntax: `TableSyntax`. This can be used by passing - `const TableSyntax()` to `markdownToHtml()`'s `blockSyntaxes:` argument. +* Added new table syntax: `TableSyntax`. +* Added new ExtensionSet that includes the table syntax: `ExtensionSet.gitHub`. * For development: added tool/travis.sh. ## 0.11.0+1
diff --git a/pkgs/markdown/README.md b/pkgs/markdown/README.md index 75f62e0..be1e77e 100644 --- a/pkgs/markdown/README.md +++ b/pkgs/markdown/README.md
@@ -39,6 +39,8 @@ * `const SetextHeaderWithIdSyntax()` - Setext-style headers have generated IDs for link anchors (akin to Pandoc's [`auto_identifiers`][pandoc-auto_identifiers]). +* `const TableSyntax()` - Table syntax familiar to GitHub, PHP Markdown Extra, + and Pandoc users. For example:
diff --git a/pkgs/markdown/example/app.dart b/pkgs/markdown/example/app.dart index 1455dc6..2c9a8be 100644 --- a/pkgs/markdown/example/app.dart +++ b/pkgs/markdown/example/app.dart
@@ -5,6 +5,7 @@ final markdownInput = querySelector('#markdown') as TextAreaElement; final htmlDiv = querySelector('#html') as DivElement; final versionSpan = querySelector('.version') as SpanElement; + final nullSanitizer = new NullTreeSanitizer(); const typing = const Duration(milliseconds: 150); final introText = r'''Markdown is the **best**! @@ -13,6 +14,18 @@ * It has [links](http://dartlang.org). * It has _so much more_...'''; +// Flavor support. +final basicRadio = querySelector('#basic-radio') as HtmlElement; +final commonmarkRadio = querySelector('#commonmark-radio') as HtmlElement; +final gfmRadio = querySelector('#gfm-radio') as HtmlElement; +md.ExtensionSet extensionSet; + +final extensionSets = { + 'basic-radio': md.ExtensionSet.none, + 'commonmark-radio': md.ExtensionSet.commonMark, + 'gfm-radio': md.ExtensionSet.gitHub, +}; + void main() { versionSpan.text = 'v${md.version}'; markdownInput.onKeyUp.listen(_renderMarkdown); @@ -28,11 +41,21 @@ } else { _typeItOut(introText, 82); } + + // GitHub is the default extension set. + gfmRadio.attributes['checked'] = ''; + gfmRadio.querySelector('.glyph').text = 'radio_button_checked'; + extensionSet = extensionSets[gfmRadio.id]; + _renderMarkdown(); + + basicRadio.onClick.listen(_switchFlavor); + commonmarkRadio.onClick.listen(_switchFlavor); + gfmRadio.onClick.listen(_switchFlavor); } void _renderMarkdown([Event event]) { var markdown = markdownInput.value; - htmlDiv.setInnerHtml(md.markdownToHtml(markdown), + htmlDiv.setInnerHtml(md.markdownToHtml(markdown, extensionSet: extensionSet), treeSanitizer: nullSanitizer); if (event != null) { // Not simulated typing. Store it. @@ -59,6 +82,29 @@ timer = new Timer(typing, addCharacter); } +void _switchFlavor(Event e) { + var target = e.currentTarget; + if (!target.attributes.containsKey('checked')) { + if (basicRadio != target) { + basicRadio.attributes.remove('checked'); + basicRadio.querySelector('.glyph').text = 'radio_button_unchecked'; + } + if (commonmarkRadio != target) { + commonmarkRadio.attributes.remove('checked'); + commonmarkRadio.querySelector('.glyph').text = 'radio_button_unchecked'; + } + if (gfmRadio != target) { + gfmRadio.attributes.remove('checked'); + gfmRadio.querySelector('.glyph').text = 'radio_button_unchecked'; + } + + target.attributes['checked'] = ''; + target.querySelector('.glyph').text = 'radio_button_checked'; + extensionSet = extensionSets[target.id]; + _renderMarkdown(); + } +} + class NullTreeSanitizer implements NodeTreeSanitizer { void sanitizeTree(Node node) {} }
diff --git a/pkgs/markdown/example/index.html b/pkgs/markdown/example/index.html index e82dd75..078c0ad 100644 --- a/pkgs/markdown/example/index.html +++ b/pkgs/markdown/example/index.html
@@ -1,43 +1,64 @@ <html> <head> - <link rel="stylesheet" href="style.css"></link> + <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400"> + <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended"> <script type="application/dart" src="app.dart"></script> <script src="packages/browser/dart.js"></script> <title>Dart Markdown Live Editor</title> </head> <body> <div class="container"> - <header> - <div class="toolbar"> - <h2>Dart Markdown Live Editor</h2> + <header> + <div class="toolbar"> + <h2>Dart Markdown Live Editor</h2> + <span style="display: flex; flex: 1;"></span> + <span class="version"></span> + <a href="https://github.com/dart-lang/markdown" title="Open Source on GitHub"> + <svg class="octicon" height="32" version="1.1" viewBox="0 0 16 16" width="32"> + <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path> + </svg> + </a> + </div> + </header> + <div class="main"> + <div class="card"> + <div class="toolbar"> + <h2>Markdown</h2> + </div> + <div style="padding: 8px; display: flex; height: 100%;"> + <textarea id="markdown"></textarea> + </div> + </div> + <div class="card"> + <div class="toolbar"> + <h2>HTML</h2> + </div> + <div id="html"></div> + </div> + </div> + <footer> + <span style="margin-right: 16px;">Markdown Flavor:</span> + <div class="radio" id="basic-radio"> + <i class="glyph">radio_button_unchecked</i> + Basic Markdown + </div> + <div class="radio" id="commonmark-radio"> + <i class="glyph">radio_button_unchecked</i> + CommonMark + </div> + <div class="radio" id="gfm-radio"> + <i class="glyph">radio_button_unchecked</i> + GitHub Flavored Markdown + </div> <span style="display: flex; flex: 1;"></span> - <span class="version"></span> - <a class="" href="https://github.com/dart-lang/markdown"> - <svg class="octicon" height="32" version="1.1" viewBox="0 0 16 16" width="32"> - <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path> - </svg> + <a href="https://github.com/dart-lang/markdown#extension-sets" + target="_blank" + title="More info"> + <i class="big glyph">help</i> </a> - </div> - </header> - <div class="main"> - <div class="card"> - <div class="toolbar"> - <h2>Markdown</h2> - </div> - <div style="padding: 8px; display: flex; height: 100%;"> - <textarea rows="16" id="markdown"> - </textarea> - </div> - </div> - <div class="card"> - <div class="toolbar"> - <h2>HTML</h2> - </div> - <div id="html"></div> - </div> - </div> + </footer> </div> </body> </html>
diff --git a/pkgs/markdown/example/style.css b/pkgs/markdown/example/style.css index bcdfe00..4d3d31a 100644 --- a/pkgs/markdown/example/style.css +++ b/pkgs/markdown/example/style.css
@@ -112,3 +112,41 @@ overflow: auto; padding: 8px; } + +footer { + box-sizing: border-box; + display: flex; + font-size: 20px; + height: 64px; + padding: 0 16px; +} + +footer a:link, +footer a:visited { + color: rgba(0, 0, 0, 0.87); +} + +.radio { + cursor: pointer; + display: inline-block; + margin-right: 16px; +} + +i.glyph { + display: inline-block; + font-family: 'Material Icons Extended'; + font-size: 16px; + font-style: normal; + font-weight: normal; + line-height: 1; +} + +.radio[checked] i.glyph { + color: #22d3c5; +} + +i.glyph.big { + font-size: 32px; + height: 32px; + width: 32px; +}
diff --git a/pkgs/markdown/lib/src/extension_set.dart b/pkgs/markdown/lib/src/extension_set.dart index 665d8f8..4e584cc 100644 --- a/pkgs/markdown/lib/src/extension_set.dart +++ b/pkgs/markdown/lib/src/extension_set.dart
@@ -7,6 +7,15 @@ static ExtensionSet commonMark = new ExtensionSet._( [const FencedCodeBlockSyntax()], [new InlineHtmlSyntax()]); + static ExtensionSet gitHub = new ExtensionSet._([ + const FencedCodeBlockSyntax(), + const HeaderWithIdSyntax(), + const SetextHeaderWithIdSyntax(), + const TableSyntax() + ], [ + new InlineHtmlSyntax() + ]); + final List<BlockSyntax> blockSyntaxes; final List<InlineSyntax> inlineSyntaxes;