Semantic Markup Kirbytags

A collection of kirbytags and Writer field marks providing advanced options for semantic markup within textareas. Includes tags for: abbr, cite, dfn, ins, mark, q, s, samp, sub, sup along with a special shortcut for handling small caps. Each tag includes a complementary textareaToolbar button and Writer field option.

Installation

Kirby CLI

kirby plugin:install scottboms/kirby-markup

Git submodule

git submodule add https://github.com/scottboms/kirby-markup.git site/plugins/kirby-markup

Copy and Paste

1. Download the contents of this repository as Zip file.
2. Rename the extracted folder to kirby-markup and copy it into the site/plugins/ directory in your Kirby project.

Usage

The following textareaButton and writer field marks are included. To enable these in the panel, you need to add them explicitly to your blueprints. For example:

text:
  label: Content
  type: textarea
  buttons:
    - smallcaps
    - abbr
    - cite
    - dfn
    - ins
    - mark
    - q
    - s
    - samp
    - sub
    - sup

description:
    type: writer
    inline: true
    marks:
      - abbr
      - cite
      - dfn
      - ins
      - mark
      - q
      - s
      - smallcaps
      - sub
      - sup

Optional Tag Attributes

All Textarea field tags provide an convenience class attribute and the abbr and dfn tags also provide an optional title attribute per HTML markup standards.

• class: A CSS class/classes to append to the element [optional]
• title: A title attribute for abbr, dfn, and `` [optional]

abbr

(abbr: CSS title: Cascading Style Sheets class: markup__abbr)

cite

(cite: Nineteen Eighty-Four class: markup__cite) by George Orwell

dfn

A (dfn: validator class: markup__dfn) is a program that checks for syntax errors in code or documents.

ins

You're late! (ins: A wizard is never late class: markup__ins).

mark

... (mark: Rebel spies managed to steal secret plans) to the Empire's ultimate weapon, the DEATH STAR ...

q

When Dave asks HAL to open the pod bay door, HAL answers: (q: I'm sorry, Dave. I'm afraid I can't do that.)

s

(s: There will be a few tickets available at the box office tonight.) SOLD OUT

samp

(samp: Keyboard not found. Press F1 to continue. class: markup__samp)

[smallcaps]

(smallcaps: porsche class: markup__sc title: Proof of Rich Spoiled Children Having Everything)

sub

C(sub: 8)H(sub: 10)N(sub: 4)O(sub: 2), also known as caffeine.

sup

a(sup: 2) + b(sup: 2) = c(sup: 2)

Compatibility

• Kirby 4+

To Do

Please note that the Writer Marks are currently an initial implementation and are not at feature parity with the Textarea buttons, so I would consider these experimental at the moment.

• Add initial support for an inline class to the smallcaps mark for styling.
• Add the ability to add attributes to Writer Marks (esp. small caps, abbr, cite, dfn).

Disclaimer

This plugin is provided "as is" with no guarantee. Use it at your own risk and always test before using it in a production environment. If you identify an issue, typo, etc, please create a new issue so I can investigate.

License

MIT