Stacks Image 545

Code


If you are showing sample code in your work, then the Code stack will make it convenient and colorful. This version has built-in highlighting of such codes as: HTML, CSS, Sass, Scss, PHP, JavaScript, CoffeeScript, AppleScript, Ruby, Markdown, Markup, Objective-C, C-like, Python, Pug, Swift, .

The stack includes 12 themes (dark and light).

You can choose three types of display language code. In the first version, the language of the code appears in the upper right corner on hover. In the second version, the panel at the top with the name of the code language (on the left) will always be visible.

  • Type 1 - you can add a border in which you can adjust the color, thickness, appearance.
  • Type 2 - you can customize the color of the panel and turn on the shine at the top right.
  • Type 3 - the code will look like in the Mac OS window (the shine on/off).
Note: One page can have one type of design.

Include line numbering and line wrap for multiline line number. Line wrap works in conjunction with line numbering.

Copy code. You can enable code copying by adjusting the color of the icon. As an icon, you can use the font FA.


The Code stack uses the Prism plugin.

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

(from the site of the Prism plugin)

-      -      -      -      -

Version 1.0.3


RapidWeaver 7/8
Stacks 3.5+


Released: 02.2019


Accept the following payment methods:
• PayPal
• Visa (including Visa Electron)
• Mastercard
• Maestro
• AMEX
• Discover
• Diner's Club


Example: Type 1

.example-angle { transform: rotate(10deg); } .example-color { color: rgba(255, 0, 0, 0.2); background: purple; border: 1px solid hsl(100, 70%, 40%); } .example-easing { transition-timing-function: linear; } .example-time { transition-duration: 3s; }

document.querySelector('#theme').addEventListener('change', (e) => { let codeSnippets = document.querySelectorAll('pre.al-snippet'); for (let i = 0; i < codeSnippets.length; i++) { codeSnippets[i].setAttribute('data-snippet-theme', e.target.value) } })

Example: Type 2

Stacks Image 701

Stacks Image 752
Stacks Image 762

Example: Type 3

Stacks Image 785

Code stack
Stacks Image 744
Stacks Image 747
Themes
Stacks Image 722
Stacks Image 724
Stacks Image 728
Stacks Image 756
Stacks Image 730
Stacks Image 760
Stacks Image 734
Stacks Image 736
Stacks Image 738
Stacks Image 740
Stacks Image 758
Stacks Image 754
Themes
Updates:

Version 1.0.1 - Added the third type (style) of code window.
Version 1.0.2 - Updated PrismJS to v.1.16.0. The copy icon now appears as a button when you hover over a code window. Small change in instruction.
Version 1.0.3 - Added language support: Scss. CoffeeScript, Pug.

Image
© 2019 Wondrousss |