This is a playground for experimental/upcoming features for PIMD – a Markdown renderer with focus on extendibility which was born out of the LivingStyleGuide project.
The Markdown source code of the file you are looking at can be found on GitHub.
This example highlights the important part to help understanding the code example:
<ul>
<li class="my-list-item">
Item 1
</li>
<li class="my-list-item my-special-list-item">
Item 2
</li>
<li class="my-list-item">
Item 3
</li>
<li class="my-list-item">
Item 4
</li>
</ul>
To highlight parts of the source add to the code block:
``` html highlight=/class="my-list-item"/
<ul>
</ul>
```
Open the specification for this feature on GitHub. Comments? Questions? Feedback? Feel free to discuss on the ticket!
When using regular expressions with the g modifier, multiple highlights can be generated:
<ul>
<li class="my-list-item">
Item 1
</li>
<li class="my-list-item my-special-list-item">
Item 2
</li>
<li class="my-list-item">
Item 3
</li>
<li class="my-list-item">
Item 4
</li>
</ul>
To highlight parts of the source add to the code block:
``` html highlight=/class="my-list-item"/g
<ul>
</ul>
```
Open the specification for this feature on GitHub. Comments? Questions? Feedback? Feel free to discuss on the ticket!
Of course, a regular expression can be written more useful:
<ul>
<li class="my-list-item">
Item 1
</li>
<li class="my-list-item my-special-list-item">
Item 2
</li>
<li class="my-list-item">
Item 3
</li>
<li class="my-list-item">
Item 4
</li>
</ul>
To highlight parts of the source add to the code block:
``` html highlight=/class=".*?"/g
<ul>
</ul>
```
Open the specification for this feature on GitHub. Comments? Questions? Feedback? Feel free to discuss on the ticket!
Multiple rules can either be done by using the or (|) in the regular expression or by providing
multiple regular expressions separated by ;:
This does not work yet!
<ul>
<li class="my-list-item">
Item 1
</li>
<li class="my-list-item my-special-list-item">
Item 2
</li>
<li class="my-list-item">
Item 3
</li>
<li class="my-list-item">
Item 4
</li>
</ul>
To highlight parts of the source add to the code block:
``` html highlight=/my-list-item|my-special-list-item/g;/<li/
<ul>
</ul>
```
Open the specification for this feature on GitHub. Comments? Questions? Feedback? Feel free to discuss on the ticket!
All 4 list items in the example above might be needed for the preview but pollute the code block. Hiding list item 2 upto 4 makes the example looks much more simple. If needed, the code can be expanded:
<ul>
<li class="my-list-item">
Item 1
</li>
</ul>
To hide parts of the source add to the code block:
``` html showmore=5-13
<ul>
</ul>
```
Open the specification for this feature on GitHub. Comments? Questions? Feedback? Feel free to discuss on the ticket!
If there is a definition for something, it can be linked:
<ul>
<li class="my-list-item">
Item 1
</li>
<li class="my-list-item my-special-list-item">
Item 2
</li>
<li class="my-list-item">
Item 3
</li>
<li class="my-list-item">
Item 4
</li>
</ul>
To link parts of the source add to the code block:
``` html link=/class/g=https://...;/my-special-list-item/g=#my-special-list-item
<ul>
</ul>
```
Open the specification for this feature on GitHub. Comments? Questions? Feedback? Feel free to discuss on the ticket!
Created by Nico Hagenburger. Released under MIT licence (see repository).
Feedback is very welcome. Do you like those features? Do you have an opinion about the naming/the syntax? Ping me on Twitter or open an issue