Skip to main content

An MkDocs plugin that lets you edit code fences in JSFiddle.

Project description

MkDocs JSFiddle Plugin

A plugin for MkDocs that lets you augment your code fences with an "Try it in JSFiddle" button.

Installation

This package can be installed via pip.

pip install mkjsfiddle

Then, add jsfiddle to the plugins section of your mkdocs.yml file.

plugins:
  - jsfiddle

Usage

Code fences will be left alone by default, as many code blocks may not form a coherent block for a user to edit. To opt in for a given code fence, add jsfiddle- to your fence language declaration, like so.

```jsfiddle-html
<!DOCTYPE html>
<!-- Some content here -->
```

The html above will be preserved for syntax highlighting, and the jsfiddle- will be dropped. Other languages are theoretically supported, but will have no impact besides code highlighting.

The default behavior is for a simple HTML parser to extract the inline JS and CSS elements and put their contents in the appropriate JSFiddle panels. More specifically, if you have a script tag with the attribute type=text/javascript AND not having the src attribute, or if you have a style tag with the attribute type=text/css, it will be extracted to the appropriate panel. If you have multiple of these, they will all be extracted and concatenated with some newlines thrown in as breaks.

If you prefer to opt out of this behavior and just dump everything as-is into the HTML box, you can add -htmlonly to the language string (for a full string that looks something like jsfiddle-html-htmlonly).

Known limitations

We attempt to keep formatting as-is, but make no guarantees in the default mode. The -htmlonly option however should preserve formatting (if it does not, please submit a bug report). This has been developed and tested with Material for MkDocs, and has not been tested extensively with additional styles. Pull requests to improve styling are welcome.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

mkjsfiddle-1.0.1.tar.gz (6.6 kB view details)

Uploaded Source

Built Distribution

mkjsfiddle-1.0.1-py3-none-any.whl (6.2 kB view details)

Uploaded Python 3

File details

Details for the file mkjsfiddle-1.0.1.tar.gz.

File metadata

  • Download URL: mkjsfiddle-1.0.1.tar.gz
  • Upload date:
  • Size: 6.6 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/4.0.1 CPython/3.11.3

File hashes

Hashes for mkjsfiddle-1.0.1.tar.gz
Algorithm Hash digest
SHA256 88563c248eeeeb367f46fe2605d3f80b6786bc41d27d2e3e640b76e5e270526b
MD5 6c42dcc9f47e288a724646b9b088b559
BLAKE2b-256 f1efbd43a2d9784ef36d2ea861462cd6a85a2b7e07be4c0f77a11e5dc9aea2b9

See more details on using hashes here.

File details

Details for the file mkjsfiddle-1.0.1-py3-none-any.whl.

File metadata

  • Download URL: mkjsfiddle-1.0.1-py3-none-any.whl
  • Upload date:
  • Size: 6.2 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/4.0.1 CPython/3.11.3

File hashes

Hashes for mkjsfiddle-1.0.1-py3-none-any.whl
Algorithm Hash digest
SHA256 cbd8ce498f048bd23b50d475e337558cf2b9d03957d6b25fd1a2158998767c88
MD5 f1788c374af2a4910f065c78905c5341
BLAKE2b-256 197bf95fe4b07a134e678d02e2d3466ab8fdcf17da4be1bc596dad582c4f308a

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page