Skip to content
This repository was archived by the owner on Feb 24, 2025. It is now read-only.

Commit 4cf7db6

Browse files
srawlinskevmoo
srawlins
authored and
kevmoo
committed
New GitHub ExtensionSet; example site supports ExtensionSets! (#132)
1 parent 3144118 commit 4cf7db6

File tree

6 files changed

+144
-28
lines changed

6 files changed

+144
-28
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
* `dart bin/markdown.dart --version` now shows the package version number.
55
* The playground app now shows the version number.
66
* Improve autolink parsing.
7-
* Added new table syntax: `TableSyntax`. This can be used by passing
8-
`const TableSyntax()` to `markdownToHtml()`'s `blockSyntaxes:` argument.
7+
* Added new table syntax: `TableSyntax`.
8+
* Added new ExtensionSet that includes the table syntax: `ExtensionSet.gitHub`.
99
* For development: added tool/travis.sh.
1010

1111
## 0.11.0+1

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ The currently supported block extension syntaxes are:
3939
* `const SetextHeaderWithIdSyntax()` - Setext-style headers have generated IDs
4040
for link anchors (akin to Pandoc's
4141
[`auto_identifiers`][pandoc-auto_identifiers]).
42+
* `const TableSyntax()` - Table syntax familiar to GitHub, PHP Markdown Extra,
43+
and Pandoc users.
4244

4345
For example:
4446

‎example/app.dart‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import 'package:markdown/markdown.dart' as md;
55
final markdownInput = querySelector('#markdown') as TextAreaElement;
66
final htmlDiv = querySelector('#html') as DivElement;
77
final versionSpan = querySelector('.version') as SpanElement;
8+
89
final nullSanitizer = new NullTreeSanitizer();
910
const typing = const Duration(milliseconds: 150);
1011
final introText = r'''Markdown is the **best**!
@@ -13,6 +14,18 @@ final introText = r'''Markdown is the **best**!
1314
* It has [links](http://dartlang.org).
1415
* It has _so much more_...''';
1516

17+
// Flavor support.
18+
final basicRadio = querySelector('#basic-radio') as HtmlElement;
19+
final commonmarkRadio = querySelector('#commonmark-radio') as HtmlElement;
20+
final gfmRadio = querySelector('#gfm-radio') as HtmlElement;
21+
md.ExtensionSet extensionSet;
22+
23+
final extensionSets = {
24+
'basic-radio': md.ExtensionSet.none,
25+
'commonmark-radio': md.ExtensionSet.commonMark,
26+
'gfm-radio': md.ExtensionSet.gitHub,
27+
};
28+
1629
void main() {
1730
versionSpan.text = 'v${md.version}';
1831
markdownInput.onKeyUp.listen(_renderMarkdown);
@@ -28,11 +41,21 @@ void main() {
2841
} else {
2942
_typeItOut(introText, 82);
3043
}
44+
45+
// GitHub is the default extension set.
46+
gfmRadio.attributes['checked'] = '';
47+
gfmRadio.querySelector('.glyph').text = 'radio_button_checked';
48+
extensionSet = extensionSets[gfmRadio.id];
49+
_renderMarkdown();
50+
51+
basicRadio.onClick.listen(_switchFlavor);
52+
commonmarkRadio.onClick.listen(_switchFlavor);
53+
gfmRadio.onClick.listen(_switchFlavor);
3154
}
3255

3356
void _renderMarkdown([Event event]) {
3457
var markdown = markdownInput.value;
35-
htmlDiv.setInnerHtml(md.markdownToHtml(markdown),
58+
htmlDiv.setInnerHtml(md.markdownToHtml(markdown, extensionSet: extensionSet),
3659
treeSanitizer: nullSanitizer);
3760
if (event != null) {
3861
// Not simulated typing. Store it.
@@ -59,6 +82,29 @@ void _typeItOut(String msg, int pos) {
5982
timer = new Timer(typing, addCharacter);
6083
}
6184

85+
void _switchFlavor(Event e) {
86+
var target = e.currentTarget;
87+
if (!target.attributes.containsKey('checked')) {
88+
if (basicRadio != target) {
89+
basicRadio.attributes.remove('checked');
90+
basicRadio.querySelector('.glyph').text = 'radio_button_unchecked';
91+
}
92+
if (commonmarkRadio != target) {
93+
commonmarkRadio.attributes.remove('checked');
94+
commonmarkRadio.querySelector('.glyph').text = 'radio_button_unchecked';
95+
}
96+
if (gfmRadio != target) {
97+
gfmRadio.attributes.remove('checked');
98+
gfmRadio.querySelector('.glyph').text = 'radio_button_unchecked';
99+
}
100+
101+
target.attributes['checked'] = '';
102+
target.querySelector('.glyph').text = 'radio_button_checked';
103+
extensionSet = extensionSets[target.id];
104+
_renderMarkdown();
105+
}
106+
}
107+
62108
class NullTreeSanitizer implements NodeTreeSanitizer {
63109
void sanitizeTree(Node node) {}
64110
}

‎example/index.html‎

Lines changed: 46 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,64 @@
11
<html>
22
<head>
3-
<link rel="stylesheet" href="style.css"></link>
3+
<link rel="stylesheet" href="style.css">
44
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
55
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
6+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended">
67
<script type="application/dart" src="app.dart"></script>
78
<script src="packages/browser/dart.js"></script>
89
<title>Dart Markdown Live Editor</title>
910
</head>
1011
<body>
1112
<div class="container">
12-
<header>
13-
<div class="toolbar">
14-
<h2>Dart Markdown Live Editor</h2>
15-
<span style="display: flex; flex: 1;"></span>
16-
<span class="version"></span>
17-
<a class="" href="https://github.com/dart-lang/markdown">
18-
<svg class="octicon" height="32" version="1.1" viewBox="0 0 16 16" width="32">
19-
<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>
20-
</svg>
21-
</a>
22-
</div>
23-
</header>
24-
<div class="main">
25-
<div class="card">
13+
<header>
2614
<div class="toolbar">
27-
<h2>Markdown</h2>
15+
<h2>Dart Markdown Live Editor</h2>
16+
<span style="display: flex; flex: 1;"></span>
17+
<span class="version"></span>
18+
<a href="https://github.com/dart-lang/markdown" title="Open Source on GitHub">
19+
<svg class="octicon" height="32" version="1.1" viewBox="0 0 16 16" width="32">
20+
<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>
21+
</svg>
22+
</a>
2823
</div>
29-
<div style="padding: 8px; display: flex; height: 100%;">
30-
<textarea rows="16" id="markdown">
31-
</textarea>
24+
</header>
25+
<div class="main">
26+
<div class="card">
27+
<div class="toolbar">
28+
<h2>Markdown</h2>
29+
</div>
30+
<div style="padding: 8px; display: flex; height: 100%;">
31+
<textarea id="markdown"></textarea>
32+
</div>
3233
</div>
33-
</div>
34-
<div class="card">
35-
<div class="toolbar">
36-
<h2>HTML</h2>
34+
<div class="card">
35+
<div class="toolbar">
36+
<h2>HTML</h2>
37+
</div>
38+
<div id="html"></div>
3739
</div>
38-
<div id="html"></div>
3940
</div>
40-
</div>
41+
<footer>
42+
<span style="margin-right: 16px;">Markdown Flavor:</span>
43+
<div class="radio" id="basic-radio">
44+
<i class="glyph">radio_button_unchecked</i>
45+
Basic Markdown
46+
</div>
47+
<div class="radio" id="commonmark-radio">
48+
<i class="glyph">radio_button_unchecked</i>
49+
CommonMark
50+
</div>
51+
<div class="radio" id="gfm-radio">
52+
<i class="glyph">radio_button_unchecked</i>
53+
GitHub Flavored Markdown
54+
</div>
55+
<span style="display: flex; flex: 1;"></span>
56+
<a href="https://github.com/dart-lang/markdown#extension-sets"
57+
target="_blank"
58+
title="More info">
59+
<i class="big glyph">help</i>
60+
</a>
61+
</footer>
4162
</div>
4263
</body>
4364
</html>

‎example/style.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,3 +112,41 @@ textarea:focus {
112112
overflow: auto;
113113
padding: 8px;
114114
}
115+
116+
footer {
117+
box-sizing: border-box;
118+
display: flex;
119+
font-size: 20px;
120+
height: 64px;
121+
padding: 0 16px;
122+
}
123+
124+
footer a:link,
125+
footer a:visited {
126+
color: rgba(0, 0, 0, 0.87);
127+
}
128+
129+
.radio {
130+
cursor: pointer;
131+
display: inline-block;
132+
margin-right: 16px;
133+
}
134+
135+
i.glyph {
136+
display: inline-block;
137+
font-family: 'Material Icons Extended';
138+
font-size: 16px;
139+
font-style: normal;
140+
font-weight: normal;
141+
line-height: 1;
142+
}
143+
144+
.radio[checked] i.glyph {
145+
color: #22d3c5;
146+
}
147+
148+
i.glyph.big {
149+
font-size: 32px;
150+
height: 32px;
151+
width: 32px;
152+
}

‎lib/src/extension_set.dart‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@ class ExtensionSet {
77
static ExtensionSet commonMark = new ExtensionSet._(
88
[const FencedCodeBlockSyntax()], [new InlineHtmlSyntax()]);
99

10+
static ExtensionSet gitHub = new ExtensionSet._([
11+
const FencedCodeBlockSyntax(),
12+
const HeaderWithIdSyntax(),
13+
const SetextHeaderWithIdSyntax(),
14+
const TableSyntax()
15+
], [
16+
new InlineHtmlSyntax()
17+
]);
18+
1019
final List<BlockSyntax> blockSyntaxes;
1120
final List<InlineSyntax> inlineSyntaxes;
1221

0 commit comments

Comments
 (0)