1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
'use-strict';
/* TODO : Send the result of guide :
const guide = require('remark-preset-lint-markdown-style-guide');
*/
const html = require('remark-rehype');
const kbd = require('remark-kbd');
const math = require('remark-math');
const highlight = require('remark-highlight.js');
const multiChoice = require('remark-multiple-choice');
const lineInput = require('remark-line-input');
const select = require('remark-select');
const textInput = require('remark-text-input');
const raw = require('rehype-raw');
const rehypeKatex = require('rehype-katex');
const rehypeStringify = require('rehype-stringify');
const unified = require('unified');
const remark = require('remark-parse');
const customBlocks = require('remark-custom-blocks');
const iframes = require('remark-iframes');
function toHTML(data, fnc) {
unified()
.use(remark)
.use(lineInput)
.use(textInput)
.use(select)
.use(multiChoice)
.use(math)
.use(kbd)
.use(customBlocks, {
information: {
classes: 'special-box information',
title: 'optional',
},
comment: {
classes: 'special-box comment',
title: 'optional',
},
attention: {
classes: 'special-box attention',
title: 'optional',
},
question: {
classes: 'special-box question',
title: 'optional',
},
good: {
classes: 'special-box good',
},
secret: {
classes: 'special-box secret',
title: 'optional',
},
bad: {
classes: 'special-box bad',
}})
.use(highlight)
.use(iframes, {
// This key corresponds to the hostname: !(http://hostname/foo)
// the config associated to this hostname will apply to any iframe
// with a matching hostname
'www.youtube.com': {
tag: 'IFRAME',
width: 560,
height: 315,
disabled: false,
replace: [
['watch?v=', 'embed/'],
['http://', 'https://'],
],
thumbnail: {
format: 'http://img.youtube.com/vi/{id}/0.jpg',
id: '.+/(.+)$'
},
removeAfter: '&'
}
})
.use(html, {allowDangerousHTML: true})
.use(rehypeKatex)
.use(raw)
.use(rehypeStringify)
.process(data, fnc);
}
toHTML.defaultValue = `Plugins presentation
=================
This page is an example of using [remark][remark] with plugins that I created. These plugins are used to parse [lines][remark-line-input] of [text](remark-text-input), [selection boxes][remark-select] and even [MCQs][remark-mcq].
The goal of this project is to propose a set of plugins allowing to create **exercises** easily.
To first let's see somes examples !
Example of exercises
--------------------
The 151th pokémon [__151th pokémon__]{#pokemon oninput="pokemon(this)"} is one of the two pokemons that can use transform attack (the other one is [ Pikachu | Ditto | Mewtow | Eevee |v] ).
Line edit
---------
You can use line edit like that :
Login : [__email or username__]{#login}
Passwd: [__Passwd__]{#password type=password}
Text edit
--------
It's also easy to use text edit :
[______
This is a text zone
______]{rows=13 cols=30}
Selection box
-------------
To use a selection box, just write it in the markdown file.
[ Mario | Peach | Luigi |v]
[remark]: https://github.com/remarkjs/remark "Github of the remark project"
[remark-line-input]: https://www.npmjs.com/package/remark-line-input
[remark-text-input]: https://www.npmjs.com/package/remark-text-input
[remark-select]: https://www.npmjs.com/package/remark-select
<script>
if( !pokemon ) {
function pokemon( elem ) {
if( elem.value != 'mew' ) {
if( elem.classList.contains('valid') )
elem.classList.remove('valid')
elem['className'] = 'invalid';
}else{
if( elem.classList.contains('invalid') )
elem.classList.remove('invalid')
elem.classList.add('valid')
}
}}</script>`;
module.exports = toHTML;
|
