Summary: Source-Code Decoration using PrismJS, with Code-Folding Version: 2022-11-16 Prerequisites: None - (Browsers need Java Script enabled) Status: Active Maintainer: Kirk Siqveland? License: Creative Commons - CC-BY-NC-SA 4.0) - OpenSourceLicenses Cookbook:Cookbook Licenses Categories: Editing, GUI, Layout, Markup, System tools, Administration Users: (view? / edit) Discussion: SyntaxMan-Talk?
Markup to auto-generate Code-Decoration and Code-Folding within PmWiki using Prism
Developed for my { SnippetsPub } website, for code sharing. I wanted an easy way to embed Source-Code in PmWiki pages, either as small snippets, or as whole source-files. For readability I wanted the source code to fold, or hide/display from a single mouse-click. See the Toggler? recipe for a stand-alone version of content-folding.
Download the file Attach:Carousel.zip Δ
Extract the files from Carousel.zip
Place carousel.php in your cookbook directory.
(On a standard installation something like www.exampledomain.org/pmwiki/cookbook/ )
Edit your config.php file:
(Should be in your Wiki local directory something like www.exampledomain.org/pmwiki/local/config.php)
Add the following lines:
## Kirk's Image Carousel recipe
include_once("$FarmD/cookbook/carousel.php") ;
Add the contents of the carousel.css file to your local.css file:
(usually found at www.exampledomain.org/pmwiki/pub/css/local.css)
Copy and paste the contents of the carousel.css file to the bottom of the local.css file
Now you're ready to use the Carousel Markup!
Use ManageCSS? recipe and then you only need to add the carousel.css file to your
/pub/css directory
If you don't want to use the image# of images display e.g. 3/10 in top left corner: You can edit the carousel.php to comment out the specific lines: look for the tag "##OPTION>>" in the code
Likewise, the image title can be displayed on the slide or not...
Obviously if you don't like my 'next' and 'previous' buttons, you would need to edit the carousel.css code.
Make sure you have a folder/directory with the images you want to use.
As the code is written, it needs to be a sub-directory of the pmwiki directory.
I keep a directory just for media files, often with sub-directories such as "slideshow" .
e.g. /pmwiki/media/slideshow3
To add a Manual-Advance Carousel to any page you just need a simple line of Markup, with the path to that directory,
Relative to your root pmwiki installation (Where the pmwiki.php file sits.)
something like:
(:Carousel /media/slideshow3:)
To add an auto-run Carousel you just add the word autorun, and optionally how many milliseconds:
(:Carousel /media/slideshow3 autorun 5000:)
See discussion at SyntaxMan-Talk?