https://github.com/dropseed/codeplus
Make your code elements interactive.
https://github.com/dropseed/codeplus
Last synced: over 1 year ago
JSON representation
Make your code elements interactive.
- Host: GitHub
- URL: https://github.com/dropseed/codeplus
- Owner: dropseed
- License: mit
- Created: 2021-10-06T14:50:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T16:34:54.000Z (almost 2 years ago)
- Last Synced: 2025-03-25T04:53:04.801Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 462 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# codeplus
Add interactive elements to your `` without a bunch of custom markup or JavaScript.
- filenames
- tabs and tab groups (with "remember tab selection")
- copy button
The key to codeplus is that you don't have to do much to make it work,
and your code blocks also look fine when it's not in use.
If you're writing docs in markdown,
for example,
you want those to look *normal* on GitHub and other sites where you don't have control over the markdown rendering.
Users should still be able to read everything in that form.
But when you render the same code on *your* site,
you get an extra layer of interactivity just by adding `codeplus` on top.
This library does not do syntax highlighting!
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.
## Features
### Filenames
To render filenames all you need to do is start your code block with a comment line that says the filename:
```yaml
# .pullapprove.yml
version: 3
groups: ...
```
When codeplus runs, you'll get something like this:
### Tab display name
Instead of filenames, you can also use a "display name" in parenetheses:
```yaml
# (GitHub)
version: 3
groups: ...
```
Or you can include a filename *and* a display name:
```yaml
# .pullapprove.yml (GitHub)
version: 3
groups: ...
```
With codeplus:
### Tab groups
To get a group of tabs, just put the code blocks right next to each other:
```yaml
# (GitHub)
version: 3
groups: ...
```
```yaml
# (Bitbucket)
version: 3
groups: ...
```
With codeplus:
### Copy button
The copy/paste button is added to all code blocks by default (shown on hover in this example):
### Remember tab selection
A nice use of tabs is to separate examples by language or ecosystem.
If you're browsing docs in "Python" mode for example,
you probably want to see the Python tab on every page you visit.
We can do this for you with localStorage:
## Installation
```sh
npm install @dropseed/codeplus
```
```js
import Codeplus from "@dropseed/codeplus";
window.addEventListener('load', function() {
new Codeplus({}).render();
});
```
### CDN
```html
window.addEventListener("load", function() {
new Codeplus({}).render();
});
```
## Options
```js
new Codeplus({
// The query selector to find your code elements
selector: "pre > code",
// Saves a user's tab selection in localStorage and shows that tab on page load (ex. "Python")
rememberTabSelections: true,
// Enable debug console.logs
debug: false,
// Use classes to add styling (or look at the default CSS classes)
instanceClass: "rounded-t-none group",
navClass: "bg-black rounded-t overflow-hidden",
tabClass: "px-3 py-2 text-sm text-gray-300 hover:text-gray-100",
activeTabClass: "bg-[#282c34]",
inactiveTabClass: "",
copyButtonClass: "items-center group-hover:flex hidden rounded border border-gray-200 px-2 py-1 text-sm",
// Custom render for the tabs
renderTab: function(tab, instance) {
const icon = "...";
tab.innerHTML = icon + tab.innerHTML;
},
// Custom render for the copy button
renderCopyButton: function(copyButton, instance, copied) {
if (!copied) {
copyButton.innerHTML = ` Copy`;
}
},
}).render();
```
## Styling
Styling can be done either with inserting classes via [options](#options) or by using the default CSS classes:
```css
.codeplus {}
.codeplus-group {}
.codeplus-nav {}
.codeplus-tab {}
.codeplus-tab.active {}
.codeplus-tab.inactive {}
.codeplus-instances {}
.codeplus-instance {}
.codeplus-copy-btn {}
```
By default there are only a few styles for basic layout help.
Any colors, font sizes, etc. are up to you and will probably be similar to your syntax highlighting theme.