Add input fields to your Markdown documents rendered by markdown-it parser.
A text field can be provided as
Name = ___
and will be converted into
<div id="name">
<label for="input-name">Name </label>
<input type="text" name="name" id="input-name">
</div>The name and the id attributes are automatically generated from the text before the = sign.
Alternatively, the name can be explictly given as shown in the example below and the id attributes are generated from the given name.
Name [yourname] = ___
This will be converted into
<div id="yourname">
<label for="input-yourname">Name </label>
<input type="text" name="yourname" id="input-yourname">
</div>It is possible to set the value of the text field as shown in the example below.
Name [yourname] = __Your name__
which will be converted into
<div id="yourname">
<label for="input-yourname">Name </label>
<input type="text" name="yourname" id="input-yourname" value="Your name">
</div>An empty text area can be provided as
"""
"""
and will be converted into
<div id="textarea">
<textarea name="textarea" id="input-textarea">
</textarea>
</div>It is possible to provide the name, value, and data-language attributes as shown in the example below.
"""c++
#include <iostream>
using namespace std;
int main()
{
cout << "Hello, World!";
return 0;
}
"""[code]
This will be converted into
<div id="code">
<textarea name="code" id="input-code" data-language="c++" value="#include <iostream>\r\nusing namespace std;\r\n\r\nint main() \r\n{\r\n cout << \"Hello, World!\";\r\n return 0;\r\n}\r\n">
#include <iostream>;
using namespace std;
int main()
{
cout << "Hello, World!";
return 0;
}
</textarea>
</div>A checkbox input can be provided as
Select your option(s)[checkbox] = [] Option 1 | Value 1 [] Option 2 | Value 2 [] Option 3 | Value 3
and will be converted into
<div id="checkbox">
<label>Select your option(s) </label>
<input type="checkbox" name="checkbox" value="Value 1" id="checkbox-option_1">
<label for="checkbox-option_1">Option 1</label>
<input type="checkbox" name="checkbox" value="Value 2" id="checkbox-option_2">
<label for="checkbox-option_2">Option 2</label>
<input type="checkbox" name="checkbox" value="Value 3" id="checkbox-option_3">
<label for="checkbox-option_3">Option 3</label>
</div>For every option the text after the | sign is used as value.
It is possible to omitt the | sign and use the label as value.
If no name is provided, the name and id attributes are automatically generated.
A radio button input can be provided as
Select (exactly) one option[radio] = () Option 1 | Value 1 () Option 2 | Value 2 () Option 3 | Value 3
and will be converted into
<div id="radio">
<label>Select (exactly) one option </label>
<input type="radio" name="radio" value="Value 1" id="radio-option_1">
<label for="radio-option_1">Option 1</label>
<input type="radio" name="radio" value="Value 2" id="radio-option_2">
<label for="radio-option_2">Option 2</label>
<input type="radio" name="radio" value="Value 3" id="radio-option_3">
<label for="radio-option_3">Option 3</label>
</div>For every option the text after the | sign is used as value.
It is possible to omitt the | sign and use the label as value.
If no name is provided, the name and id attributes are automatically generated.
A dropdown menu can be provided as
Please select[dropdown] = {Option 1 | Value 1 ; Option 2 | Value 2; Option 3 | Value 3 }
and will be converted into
<div id="dropdown">
<label for="input-dropdown">Please select </label>
<select name="dropdown" id="input-dropdown">
<option value="Value 1">Option 1</option>
<option value="Value 2">Option 2</option>
<option value="Value 3">Option 3</option>
</select>
</div>For every option the text after the | sign is used as value.
It is possible to omitt the | sign and use the label as value.
If no name is provided, the name and id attributes are automatically generated.
For each input element you can add a HTML comment
<!-- input: { "name":"input", "value":"Some value", "div": {"class"="input"} } -->to specify a name for the input field and to add attributes for the div container or the respective input element.
For checkboxes, radio boxes, and dropdown lists, you can also add an array of attributes for the different options, e.g.,
<!-- input: { "name":"input", "div": {"class"="input"}, "options": [{},{"checked":"checked"},{}] } -->The plugin allows to specify a prefix for the id attributes.
document.getElementById('content').innerHTML = markdownit({html: true}).use(input, { prefix: "myform"}).render( document.getElementById('content').innerHTML );<html>
<head>
<meta charset='utf-8'>
<script src="markdown-it.min.js"></script>
<script src="markdown-it-input.js"></script>
</head>
<body>
<div id="content">
Name = ___
"""
"""
<!-- input: { "name":"mytextarea", "value":"Your text\n...\n...\n...", "div":{"id":"myTextareaID"} } -->
Select your option(s) = [] Option 1 [] Option 2 [] Option 3
<!-- input: { "name":"input3", "options": [{},{"checked":"checked"},{}] } -->
Select (exactly) one option = () Option 1 () Option 2 () Option 3
Please select = {Option 1; Option 2; Option 3}
</div>
<script>
document.getElementById('content').innerHTML = markdownit({html: true}).use(input, { prefix: "myform"}).render( document.getElementById('content').innerHTML );
</script>
</body>
</html>markdown-it: Markdown parser done right. Fast and easy to extend.
The plugin is inspired by the proposal for extending markdown to support input elements by Yevgeniy Brikman.
markdown-it-input is licensed under the MIT License