33Add 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
99The 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.
1818This library does not do syntax highlighting!
1919That 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+
2125To 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+
3339You 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+
4553To 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
6473The 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+ 
86+
87+
6888# # Installation
6989
7090` ` ` sh
0 commit comments