hagenburger / pimd

PIMD – Processing Instructions for Markdown
https://hagenburger.github.io/pimd-docs/
MIT License
20 stars 5 forks source link

Show more plugin #20

Closed hagenburger closed 5 years ago

hagenburger commented 6 years ago

New feature

Allow highlighting important parts of code examples.

Specifications

``` html +showmore=5..13
<ul>
  <li class="my-list-item">
    Item 1
  </li>
  <li class="my-list-item">
    Item 2
  </li>
  <li class="my-list-item">
    Item 3
  </li>
  <li class="my-list-item">
    Item 4
  </li>
</ul>


Result:

![preview](https://user-images.githubusercontent.com/103399/44298456-b4d60180-a2e3-11e8-96f7-5740028c564c.png)

A click on the button reveals the hidden code and removes the button.

### The following syntax should be valid:

* `+showmore=1..2` – hide lines 1 to 2
* `+showmore=1..2,5..8` – hide lines 1 to 2 and 5 to 8
* `+showmore=1:10..20` – hide column 10 to 20 in line 1
* `+showmore=1:10..20;5..8` – combination of the examples above

### Indentation

If the starting line is indented by spaces or tabs, the same indentation should be used for the button. See screenshot – the button is aligned with the `<li>` element:

![preview](https://user-images.githubusercontent.com/103399/44298456-b4d60180-a2e3-11e8-96f7-5740028c564c.png)

## Open questions

* Is `-` the best sign to separate lines? Maybe negative lines are useful to count from the end. In that case, a `,` might be better, but also harder to understand. → No, use Ruby’s syntax: `12..34`; this allows negative numbers `2..-3`
* The style of the button should be defined later.
* Should `1:10..2:30` be possible? → Not in the first version
violetadev commented 6 years ago

#20 Show more plugin

violetadev commented 6 years ago

#20 Show more plugin