Skip to content

Commit c6f261d

Browse files
authored
Update README.md
1 parent c20ecd4 commit c6f261d

1 file changed

Lines changed: 21 additions & 1 deletion

File tree

README.md

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Add interactive elements to your `<code>` without a bunch of custom markup or JavaScript.
44

55
- filenames
6-
- tabs
6+
- tabs and tab groups (with "remember tab selection")
77
- copy button
88

99
The key to codeplus is that you don't have to do much to make it work,
@@ -18,6 +18,10 @@ you get an extra layer of interactivity just by adding `codeplus` on top.
1818
This library does not do syntax highlighting!
1919
That means you can use any server-side (or client-side) syntax highlighter you want and codeplus will add the interactive features after the fact.
2020

21+
## Features
22+
23+
### Filenames
24+
2125
To render filenames all you need to do is start your code block with a comment line that says the filename:
2226

2327
```yaml
@@ -30,6 +34,8 @@ When codeplus runs, you'll get something like this:
3034
3135
<img width="718" alt="CleanShot 2022-04-29 at 12 24 58@2x" src="https://user-images.githubusercontent.com/649496/165993479-c4b051b8-28ab-4874-bf41-cad379af4229.png">
3236
37+
### Tab display name
38+
3339
You can also change the display name by using parentheses after the filename:
3440
3541
```yaml
@@ -42,6 +48,8 @@ With codeplus:
4248
4349
<img width="704" alt="CleanShot 2022-04-29 at 12 25 11@2x" src="https://user-images.githubusercontent.com/649496/165993506-1dbb33b5-89e9-4fd6-8f02-99ab32d16e8c.png">
4450
51+
### Tab groups
52+
4553
To get a group of tabs, just use the same pattern followed by a `- <group identifider>`:
4654

4755
```yaml
@@ -60,11 +68,23 @@ With codeplus:
6068

6169
<img width="711" alt="CleanShot 2022-04-29 at 12 25 36@2x" src="https://user-images.githubusercontent.com/649496/165993539-b8f5a86f-d5e6-4ae4-a038-e8c11ebaf75f.png">
6270

71+
### Copy button
6372

6473
The copy/paste button is added to all code blocks by default (shown on hover in this example):
6574

6675
<img width="715" alt="CleanShot 2022-04-29 at 12 26 55@2x" src="https://user-images.githubusercontent.com/649496/165993684-2ddd8770-1741-4222-8d88-1abeaa885185.png">
6776

77+
### Remember tab selection
78+
79+
A nice use of tabs is to separate examples by language or ecosystem.
80+
If you're browsing docs in "Python" mode for example,
81+
you probably want to see the Python tab on every page you visit.
82+
83+
We can do this for you with localStorage:
84+
85+
![CleanShot 2022-04-29 at 10 25 41](https://user-images.githubusercontent.com/649496/165994437-1eb3f42a-d848-4190-a388-9f8b2a11deff.gif)
86+
87+
6888
## Installation
6989

7090
```sh

0 commit comments

Comments
 (0)