The Joy of SECST

SECST ([S]emantic, [E]xtensible, [C]omputational, [S]tyleable, [T]agged) markup is a more expressive, but easy to learn and use, superset and alternative to regular Markdown. It provides these features and more:

• Support for almost all HTML tags and then some..., with themes and styles.
• Table of contents, footnote, hashtag and social media support.
• Reactive formulas and data import that are as simple as Excel formulas, e.g. [:value[2 * 2] = .
• SEO optimization via server rendering, meta tags
• and JSON-LD structured data for both content generation and layout.

Use SECST to joyfully create compelling, interactive HTML documents.

This is the source for the introduction above:

:abbr[SECST] (**[S]**emantic, **[E]**xtensible, **[C]**omputational, **[S]**tyleable, **[T]**agged) markup is a more expressive, but easy to learn and use, superset and alternative to regular Markdown. It provides these features and more:

:ul[
- Support for almost all HTML tags :a(.#tags)[and then some...], with :a(.#theme)[themes and styles].
- :a(.#tables-of-contents)[Table of contents], :a(.#footnotes)[footnote], :a(.#hashtags)[hashtag] and :a(.#mentions)[social media] support.
- Reactive :a(.#values-and-formulas)[formulas and data import] that are as simple as Excel formulas, e.g. :code[:value[2 * 2]] = :value[2 * 2].
- SEO optimization via :a(.#server-processing)[server rendering], :a(.#meta-tags)[meta tags], and JSON-LD :a(.#structured-data)[structured data] for both content generation and layout.
]

Use SECST to joyfully create compelling, interactive HTML documents.

Table Of Contents▼▲

1. About This Guide
2. Why Another Language
   1. HTML and Markdown Issues
   2. SECST Benefits
3. When To Use SECST
   1. Basic Markdown
   2. Extended Markdown
   3. Markdown Gaps
4. Authoring
   1. Markup Tags With HTML Names
      1. Code
      2. Details
      3. Headings
      4. HTML Entities and Special Characters
      5. Hyperlinks
      6. Inserted And Deleted
      7. Lists
         1. Unordered And Ordered Lists
         2. Description Lists
         3. Task Lists
      8. Meta Tags
      9. Multimedia
         1. Images
         2. Audio
         3. Video
      10. Paragraph
      11. Style
   2. Markup Without HTML Names
      1. Escaping SECST
      2. Emojis
      3. Footnotes/Endnotes
      4. forEach
      5. Hashtags
      6. Latex
      7. Macros
      8. Mermaid Chart
      9. Questions
      10. REPL
      11. Sheet Music (ABC Notation)
      12. Social Media And Other Mentions
      13. Structured Data
          1. News Article
      14. Tables of Contents
      15. Theme
      16. Transpiled SECST
      17. Values and Formulas
          1. Typed Data
          2. String Manipulation
          3. Basic Math
             1. Algebraic Functions
             2. Matrix Functions
          4. Unit Math
          5. Importing Data
          6. Advanced Formulas
             1. Formulas With CSS Selectors and Multiple Values
             2. Macro List Formatting
             3. JavaScript
   3. Styling Content
5. Transpiling
   1. Client Processing
   2. Server Processing
6. Configuring, Extending, And Programming
   1. Basic Configuration
      1. Semantic Options
      2. Error Handling
   2. Tag Configuration
   3. Custom Tags
   4. Custom Methods
   5. Event Listeners
7. Complete List Of Tags
8. Design Objectives
9. Grammar
10. Architecture
    1. Semantic Architecture
    2. Data Architecture
    3. Project Architecture
11. Security
12. Release History (Reverse Chronological Order)
13. Copyright and License

☷ About This Guide ↓

The SECST language, reference HTML transpiler and runtime support implementations are currently in ALPHA. Most, but not all, documented features are implemented, testing is far from complete and resource sizes have not been fully optimized.

This site's navigation, footnotes, computations, special styles like Key formatting and imported data are built entirely using SECST markup.

You can tap on the icon next to a heading to access a table of contents at any time. You can goto the top of the guide by tapping on SECST in the top left corner.

This guide is comprehensive, which may make it a little overwhelming. However, SECST has been designed so that you can start using it just a few tags and capabilities at a time.

The following order of learning is suggested:

1. Use tags that support markup similar to Markdown.
2. Start leveraging attributes like align on img.
3. Try themes or styles.
4. If you are into music, math, or chemistry try sheetMusic or Latex.
5. Add some simple values and formulas.
6. Anything else that gives you joy!

For gentle overviews see the Medium and Hackernoon articles:

• Medium:The Joy of SECST Markup
• Hackernoon:The Joy of Using SECST Markup

☷ Why Another Language ↑ ↓

Semantic Tag

A tag that has meaning beyond that used to facilitate document layout and style.

<b> for bold is not semantic, but <strong> for indicating importance and rendering as bold is semantic.

☷ When To Use SECST ↑ ↓

If you only need basic Markdown, then SECST is probably not for you.

If you need extended Markdown, then SECST may be a good option.

If you need more than Markdown, then SECST may be your only option short of HTML, CSS, and JavaScript so long as you are focused on interactive document authoring. If you are building an application use Svelte, VUE, React or some other framework.

> quoted text line one
> quoted text line two

:ol[
  1. Item One
  -  Item Two
]

code block

☷ Authoring ↑ ↓

Although most Markdown is supported, authors should write documents using semantic tags with the format <tag>[<content>] or <tag>(<parameters>)[<content>].

For example:

• :strong[bolded important content] produces bolded important content
• :em[italicized emphasized content] produces italicized emphasized content

:ul[
  - LinkedIn
  - Facebook
  - Twitter
]

:ol[
  2. LinkedIn
  - Facebook
  - Twitter
]

:ol({type:"a"})[
  - LinkedIn
  - Facebook
  - Twitter
]

:dl[
  :dt[Beast of Bodmin]
  :dd[A large feline inhabiting Bodmin Moor.]

  :dt[Morgawr]
  :dd[A sea serpent.]

  :dt[Owlman]
  :dd[A giant owl-like creature.]
]

☷ Markup Without HTML Names ↑ ↓

☷ Escaping SECST ↑ ↓

SECST tagging inside of :code[] is automatically escaped. If you wish to escape it elsewhere use the tag :escape[].

:code[:strong[text]] renders as :strong[text].

:escape[:strong[text]] renders as :strong[text].

☷ Emojis ↑ ↓

Emojis can take the form :emoji[<emoji-name>...], where <emoji-name>... is a space separated list of emoji names or the short form, :<emoji-name>: can be used.

There are over 1,800 emojis. If a match for the emoji name can't be found, it is displayed as plain text.

See EmjoiMart to find just the right emoji.

:emoji[smile] and :smile: both render as 😄.

:emoji[smile frowning jumping] renders as 😄 😦 :jumping.

Most emoji's are colored. You can use grayscale emojis by providing the attribute grayscale.

:emoji(grayscale)[smile] renders as 😄.

:emoji(grayscale)[smile frowning jumping] renders as 😄 😦 :jumping.

☷ Footnotes/Endnotes ↑ ↓

Footnotes are inserted with the :footnote[<footnote-text>] tag. The content between the braces is used as the footnote and placed at the end of the document. Auto-numbering is done so that authors do not have to keep updating footnotes as the document changes. 1

The source for the above footnote is:

:footnote(#markdown-footnote)[Markdown does not autonumber footnotes, which makes them hard to maintain. Although, it does create back-references.]

.

To re-use a footnote, give the first occurrence an id. Then, give the subsequent uses an href attribute or shorthand relative URL reference using the id and leave the content section between the braces empty. This will override the anchors for numbered links generated by the SECST transpiler, but not break ordering. 2 If you do provide content when reusing, it will be ignored.

The source for the second footnote is: :footnote(.#markdown-footnote).

And, here is a third, :footnote[Footnote management does not get much easier!], that just gets numbered. 3

☷ forEach ↑ ↓

The :forEach[] tag supports repeating content based on an iterable object, typically an array or the results of using a CSS selector to gather values from a document.

The variables item, index, iterable are available to string template literals in the content.

:ol[
  :forEach({iterable:["a","b","c"]})[
      :li[${item} at ${index}]
  ]
]

renders as

1. a at 0
2. b at 1
3. c at 2

:value(#a hidden literal)[a] :value(#b hidden literal)[b] :value(#c hidden litral)[c]
:ol[
  :forEach({iterable:"#a, #b, #c"})[
      :li[${item} at ${index}]
  ]
]

renders as

1. a at 0
2. b at 1
3. c at 2

☷ Hashtags ↑ ↓

Hashtags can take the form #<value>[] or #[<value>...], or :hashtag[<value>...] where <value>... is a space separated list of words to hashtag.

#secst-is-great[] renders as #secst-is-great.

#[secst-is-great javascript-is-great] renders as#secst-is-great, #javascript-is-great.

:hashtag[secst-is-great javascript-is-great] renders as #secst-is-great, #javascript-is-great.

Hashtags are automatically added to the meta tags in the head of a document for indexing and SEO purposes.

☷ Latex ↑ ↓

Math and chemical formulas can be displayed using the :latex[] tag.

:latex[Lift = \frac{1}{2} \rho v^2 S C_L] renders as

:latex[\ce{CO2 + C -> 2 CO}] renders as

To display the generated formula as a block, end the content between the [] with a newline.

☷ Macros ↑ ↓

New tags can be defined in the content of any document through the use of macros.

A macro takes a name attribute, which will be the new SECST tag name and a tag attribute which will be the top level HTML tag to use for replacing the macro tag.

The content of the macro is used as a substitute for the macro. The content can contain variables that are populated based on attributes provided to the new tag when it is used.

An optional attribute contentAllowed specifies if instances of the macro tag can provide content to append at the end.

:macro({name:"profile",tag:"p",contentAllowed:true})[
  :em[${name}]
  :em[${age}]
]
:profile({name:"joe",age:26})[Hi there ${name}!] // Hi there joe! gets appended since contentAllowed is true

renders as

joe
26
Hi there joe!

with the HTML

<p> <em>joe</em><br> <em>26</em><br> Hi there joe!</p>

☷ Mermaid Chart ↑ ↓

:mermaidChart[] is a block level element, it belongs outside of paragraphs. Just provide Mermaid notation as the content.

:mermaidChart[
 graph LR
 A --- B
 B-->C[fa:fa-ban forbidden]
 B-->D(fa:fa-spinner);
]

renders as

                graph LR
                A --- B
                B-->C[fa:fa-ban forbidden]
                B-->D(fa:fa-spinner);
            

There are lots of charts to choose from:

• Flowchart
• Sequence Diagram
• Class Diagram
• State Diagram
• Entity Relationship Diagram
• User Journey
• Gannt
• Pie Chart
• Requirement Diagram
• Gitgraph Diagram
• C4C Diagram
• Mindmaps

☷ Questions ↑ ↓

Questions can be used to create a quiz like experience.

:question({type:"number",showanswer:true})[
  :text[What is the :code[sqrt(4)]?]
  :answer[sqrt(4)]
]

renders as:

What is the sqrt(4)? ✓

Clicking on the ✓ or leaving the input field tests the answer. If incorrect, the question will be surrounded with a red box based on the style secst-error.

Questions take most of the same type attribute values as input. They can also take the attribute showanswer:true if the correct answer is supposed to be shown after a user provides the wrong response.

Questions have two required content tags, :text[<question-body>] and :answer[<some-formula>], that must be provided in order. The <question-body> can be just about any content that would normally go in a paragraph. Formulas are documented later. The :answer[] tag can also take the attribute literal, e.g. :answer(literal)[2].

☷ REPL ↑ ↓

The :repl[] tag supports the insertion of a REPL into a document.

Below is what a REPL looks with all sections turned on plus line numbers.

:repl({head:true,css:true,body:true,javascript:true,linenumbers:true})[]

If you drop sections, they will disappear:

:repl({css:true,body:true,linenumbers:true})[]

Sections can be pre-populated:

:repl({css:true,body:true,linenumbers:true})[
  :slot({name:"css"})[h1 { font-size:small}]
  :slot({name:"body"})[<h1>Heading One</h1>]
]

h1 { font-size:small} <h1>Heading One</h1>

Sections can be made readonly:

:repl({css:true,body:true,linenumbers:true})[
  :slot({name:"css",readonly:true})[h1 { font-size:small}]
  :slot({name:"body"})[<h1>Heading One</h1>]
]

h1 { font-size:small} <h1>Heading One</h1>

Sections can be hidden:

:repl({css:true,body:true,linenumbers:true})[
  :slot({name:"css",hidden:true})[h1 { font-size:small}]
  :slot({name:"body"})[<h1>Heading One</h1>]
]

<h1>Heading One</h1>

See the following for more info:

• GitHub
• NPMJS
• Medium: How to Host a REPL

☷ Sheet Music (ABC Notation) ↑ ↓

:sheetMusic[] is a block level element, it belongs outside of paragraphs. Just provide ABC notation as the content.

:sheetMusic[
  X: 1
  T: Nokia Tune
  M: 3/4
  L: 1/8
  K: Amaj
  |: e'd' f2 g2 | c'b d2 e2 | ba c2 e2 | a6 |
]

renders as

X: 1 T: Nokia Tune M: 3/4 L: 1/8 K: Amaj |: e'd' f2 g2 | c'b d2 e2 | ba c2 e2 | a6 |

If you drop the : from the second position in the last line, the play button will disappear.

:sheetMusic[
  X:1
  T: Paper
  K:D
  | DDAA | BBA2|
]

renders as

X:1 T: Paper K:D | DDAA | BBA2|

☷ Social Media And Other Mentions ↑ ↓

Several platforms provide @mention capability, but only for their users, e.g. GitHub and StackExchange. SECST allows you to mention people on any platform, although they do not get notified.

Mentions take the form @<platform>[<space separated profile-names>]. The target for mentions will always be another browser tab, unless a target attribute is provided.

The mark-up @github[anywhichway] renders as anywhichway@github.

Alternatively you can name the user and provide your own content, e.g. @github({user:"anywhichway"})[AnyWhichWay] renders as AnyWhichWay.

The supported platforms are:

• LinkedIn
• Facebook
• GitHub
• Twitter

☷ Structured Data ↑ ↓

For select tags, SECST can generate JSON-LD directly from SECST markup. Content, layout, and SEO optimization will always be in sync.

This is best covered by an example based on Google's documentation for a news article.

Note: Only those tags documented for NewsArticle are currently supported.

☷ News Article ↑ ↓

The SECST tag :NewsArticle[] can contain regular SECST as well as tags that parallel established JSON-LD schema like :headline[], :author[] and :Person[]. Where there are identical or trivially equivalent tags and attribute names, e.g. image and img, the native SECST tag is used.

:NewsArticle[
  :headline[Pinky Conquers The World]
  :img(./assets/images/The_Blue_Marble.jpg {height:50})[Earth]
  :p[
      Today Pinky finally conquered the world! Next up will be Mars. Watch out billionaires!
  ]
  :author[The Brain]
  :datePublished({format:""})[2022-12-20T08:00:00+08:00]
]

Where JSON-LD names elements accept sub-types, e.g. :Person[], those can also be used:

:NewsArticle[
  :headline[Pinky Conquers The World]
  :img(./assets/images/The_Blue_Marble.jpg {height:50,align:"left"})[Earth]
  :p[
     Today Pinky finally conquered the world! Next up will be Mars. Watch out billionaires!
  ]
  :author[
      :Person[
          :name[The Brain]
      ]
  ]
  :datePublished({format:""})[2022-12-20T08:00:00+08:00]
]

renders as

Pinky Conquers The World

Today Pinky finally conquered the world! Next up will be Mars. Watch out billionaires!

The Brain 12/19/2022

SECST knows which tags to collect into arrays for JSON-LD and how to map similar SECST or HTML semantics to JSON-LD. It ignores tags that are not part of JSON-LD schema unless they have been mapped to JSON-LD schema internally.

Some JSON-LD attributes mapped to tags can have attributes, e.g. :heading({level:2})[].

Also note the use of Date formatting below based on Javascript date and time format functionality.

:NewsArticle[
  :headline({level:2})[Pinky and The Brain Plan For Mars]
  :img(./assets/images/mars.jpg {height:50,align:"left"})[Mars]
  :p[
      We, Pinky and The Brain, will soon announce plans to partner with one of the world's billionaires to take over Mars.
  ]
  :Author[
      :Person[
          :name[Pinky]
      ],
      :Person[
          :name[The Brain]
      ]
  ]
  :datePublished({format:"{dateStyle:'full',timeStyle:'long'}"})[2022-12-20T08:00:00+08:00]
]

will generate this JSON-LD and insert it into the head of the document:

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "Pinky and The Brain Plan For Mars",
"image": [
  "./assets/images/mars.jpg"
 ],
"datePublished": "2022-12-20T08:00:00+08:00",
"author": [{
    "@type": "Person",
    "name": "Pinky",
  },{
    "@type": "Person",
    "name": "The Brain"
}]
}
</script>

while rendering this content

Pinky and The Brain Plan For Mars

We, Pinky and The Brain, will soon announce plans to partner with one of the world's billionaires to take over Mars.

Pinky, The Brain Monday, December 19, 2022 at 4:00:00 PM PST

The ordering of the tags inside :NewsArticle[] is only relevant to the display layout. This generates equivalent JSON-LD:

:NewsArticle[
  :headline({level:4})[Pinky and The Brain Plan For Mars]
  :author[
      :Person[:name[Pinky]],
      :Person[:name[The Brain]]
  ]
  :datePublished({format:"{dateStyle:'full',timeStyle:'long'}"})[2022-12-20T08:00:00+08:00]
  :img(./assets/images/mars.jpg {height:50,align:"left"})[Mars]
  :p[
      We, Pinky and The Brain, will soon announce plans to partner with one of the world's billionaires to take over Mars.
  ]
]

but renders with a smaller heading and the attribution at the start:

Pinky and The Brain Plan For Mars

Pinky, The Brain Monday, December 19, 2022 at 4:00:00 PM PST

We, Pinky and The Brain, will soon announce plans to partner with one of the world's billionaires to take over Mars.

The generated HTML also contains styles, so a style sheet can be used to modify the displayed content.

<div class="JSON-LD-NewsArticle">
  <h1>Pinky and The Brain Plan For Mars</h1>
  <span>
      <span class="JSON-LD-Person"><name class="JSON-LD-Person-name">Pinky</name></span>,
      <span class="JSON-LD-Person"><name class="JSON-LD-Person-name">The Brain</name></span>
  </span>
  <span data-format="{dateStyle:&#x27;full&#x27;,timeStyle:&#x27;long&#x27;}">Monday, December 19, 2022 at 4:00:00 PM PST</span>
  <p>                            <img height="50" align="left" title="Mars" alt="Mars" src="./assets/images/mars.jpg"><br>                            We, Pinky and The Brain, will soon announce plans to partner with one of the world's billionaires to take over Mars.<br>                        </p>
</div>

☷ Tables of Contents ↑ ↓

Tables of contents are placed at the location of the tag toc[<title>]. The :toc[] tag should occur at the same level, i.e. outside of, :section[].

If you do not provide a title, "Table of Contents" is used. All content after the tag is analyzed for sections with a heading as the first child tag. These are used for the table.

Levels are determined based on section nesting. You can use the heading tag :h[] that has no number and the headings will be automatically sized.

Only the first occurrence of toc is used, others are ignored.

After transpilation, each heading in the document will have an ☷ icon preceding it. When this icon is clicked, the table of contents will hover over the heading until something in the document is clicked.

Each heading will have up and down arrows placed after it to facilitate jumping to the previous and next section.

The tag can take the boolean attribute toggle to collapse the table of contents into an HTML details element.

☷ Theme ↑ ↓

If a :theme[] tag with a URL exists in document, then the default CCS file secst.css is not applied.

The theme ./assets/themes/html.css provides only those styles dependent on the .secst class and a few structural defaults. Default browser HTML styling is used elsewhere. It is kind of ugly!

Only one theme tag is usually used, but it is possible to use multiple theme tags.

The content of a theme can be any tag, except most have a special interpretation. The tag content is the CSS to apply to the tag, e.g. :theme[:p[border:solid black 1px;]] will put a black border around all paragraphs.

The theme content tags permitted but not treated in a special way are :link[], :style[], and :class[] (which is unique to :theme[]).

The tag :class[] takes a name attribute (without a prefixed period) and the content is the CSS, e.g. :theme[:class({name:"italic-paragraph"})[font-style:italic;]] creates a class .italic-paragraph. These classes can be added to the parenthetical part of tags, e.g. :p(.italic-paragraph)[Paragraph in italics].

Theme tags can exist as Body Content or Block Content. They should be placed as close to the top of the document as possible.

Themes can be scoped using the scope attribute, the value of which is a CSS selector string, e.g. :theme({scope:#special-section})[:p[border:solid black 1px;]] will only put borders around paragraphs that are inside a :section(#special-section)[].

Themes associated with a URL can be statically loaded as HTML style tags by using the attribute static.

:theme[:class({name:"italic-paragraph"})[font-style:italic;]]
:theme({scope:"#special-section"})[:p[border:solid black 1px;]]
:section[
 :p(.italic-paragraph)[Italic paragraph with no border.]
]
:section(#special-section)[
 :p[Paragraph with border.]
]

renders as

Italic paragraph with no border

Paragraph with border

☷ Transpiled SECST ↑ ↓

The HTML of transpiled SECST can be displayed as plain text, e.g. :transpiled[:strong[test]] renders as <strong>test</strong>.

If you desire the transpiled code to be displayed as a block, end the content between the [] with a newline.

☷ Values and Formulas ↑ ↓

SECST supports the tag :value[] for adding reactive variables and formulas to documents.

• The value of a :value[] is the content, i.e the text between the []. It should be either a literal value or a formula, e.g. :value[2 * 2] = .
• By default values are visible. Use the boolean attribute hidden to hide them, e.g. :value(hidden)[2 * 2] = .
• So that readers know the value may be computed, computed ones are rendered as disabled, readonly input. To render them as plaintext use the attribute plaintext, e.g. :value(plaintext)[2 * 2] = 4.
• To make a value editable by readers, use the attribute editable, e.g. code[:value(editable)[2 * 2]] = .
• Everything between the [] is treated as a formula for evaluation, if your readers may be entering formula like text and you do not want it evaluated, use the attribute literal, e.g. :value(literal)[2 *2] = .
• If values are not given a title attribute, e.g. :value({title:"Two times two"})[2 * 2], then the content is used as the mouseover title unless the content is provided by a URL, in which case the URL is the title, e.g. :value(./sample.json type="application/json") has a mouseover title of ./sample.json.

Formulas are actually just valid JavaScript expressions that also support standard and symbolic math. SECST attempts to process most values as math expressions first4 and if this fails, as JavaScript.

• 2 * 3 = ,
• 2^3 when used as part of a math expression5, is the same as 2**3, which is the same as pow(2,3), which is the same as Math.pow(2,3) = .

To use a value in another formula, the value must be named with an id, e.g.

:value(#v1)[2] + :value(#v2)[2] = :value(plaintext)[$(#v1) + $(#v2)]

+ = 4 (try changing one of the inputs)

The code $(#<some-id>) is used to substitute named values into formulas. See Advanced Formulas for use of more general CSS selectors and arrays.

☷ Typed Data ↑ ↓

The :value[] tag supports the type attribute, valid types include those supported by the HTML input element except button, file, hidden, image, search and submit.

The type can also be one of the mime-types text/plain, text/csv, application/json, e.g. :value(editable {type:"application/json"})[{name:"Joe"}] as shown below in Importing Data..

If you provide a type, e.g. :value(editable {type:"number"}), then the type will be enforced when the value is edited: .

If the value is computed, a red border will surround type check failures.

☷ String Manipulation ↑ ↓

Strings can be combined using the + sign, e.g. :value["Hello" + " " + "world!"] = .

Strings can be manipulated using the standard JavaScript methods, e.g. :value["Hello world!".substring(0,5)] = .

☷ Basic Math ↑ ↓

Math formulas include anything that can use the normal operators, ,%,^,*,-,+,<,<=,==,>=,> and any functions available via MathJS.

Formulas can include physical constants, e.g :value[pi * 3^2] = .

This includes these items (most links goto MathJS documentation):

• Algebraic functions, covered in more detail later.
• Arithmetic functions
• Bitwise functions
• Combinatorics functions
• Complex functions
• Geometry functions
• Logical functions
• Matrix functions, covered in more detail later.
• Probability functions
• Relational functions
• Set functions
• Special functions
• Statistics functions
• String functions
• Trigonometry functions
• Unit functions
• Utility functions

☷ Algebraic Functions ↑ ↓

You can ...

Compute derivatives:

:value[derivative('x^2 + x', 'x')]

Simplify equations:

:value[simplify('x^2 + x + 3 + x^2')]

Solve equations:

:value[solve('Math.pow(r,2)',{r:3})}]

Give your readers the opportunity to provide the values for which to solve:

Math.pow(r,2)
where r = :value(#v1d)[0]
is :value[solve('Math.pow(r,2)',{r:$(#v1d)})]

renders as

Math.pow(r,2) where r = is

The derivative of :value(#formula literal editable)[x^2 + x]
for :value(#variable literal editable)[x]
is :value[derivative($(#formula),$(#variable))]

renders as

The derivative of for is

☷ Matrix Functions ↑ ↓

☷ Unit Math ↑ ↓

Unit math from MathJS allows for conversions using the word to, as well as units for numbers, e.g. 45 deg.

There are many supported units.

Here are a few examples:

:value[2 inch to cm] =

:value[90 km/h to mi/h] =

:value[90 km/h to m/h] = m/h is meters per hour

:value[(1 week + 1 day) to days] =

:value[cos(45 deg)] =

:value[8.314 m^3 Pa / mol / K] =

Remember, if you have a value that looks like a formula, but is not, you can use the attribute literal, e.g. :value(literal)[2 inch to cm] = .

And, you can use plaintext to display values without any styling, e.g. :value(plaintext)[90 km/h to mi/h] = 90 km/h to mi/h.

☷ Importing Data ↑ ↓

Values can included imported data using the src attribute and a mime type provided in the type attribute. The trailing [] are optional.

Values with the boolean attribute static is import data at transpile time. If importing fails, another attempt is made at runtime.

JSON is formatted for readability and JSON5 is supported to make it easier to handle remote data.

:value(https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson static {type:"application/json"})

{ "type": "FeatureCollection", "metadata": { "generated": 1672588168000, "url": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson", "title": "USGS All Earthquakes, Past Hour", "status": 200, "api": "1.10.3", "count": 6 }, "features": [ { "type": "Feature", "properties": { "mag": 2.5, "place": "43 km NW of Beluga, Alaska", "time": 1672587953250, "updated": 1672588150777, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak0231wqlwd", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0231wqlwd.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 96, "net": "ak", "code": "0231wqlwd", "ids": ",ak0231wqlwd,", "sources": ",ak,", "types": ",origin,phase-data,", "nst": null, "dmin": null, "rms": 0.47, "gap": null, "magType": "ml", "type": "earthquake", "title": "M 2.5 - 43 km NW of Beluga, Alaska" }, "geometry": { "type": "Point", "coordinates": [ -151.5625, 61.4574, 96.3 ] }, "id": "ak0231wqlwd" }, { "type": "Feature", "properties": { "mag": 1.35, "place": "6km W of Cobb, CA", "time": 1672587781720, "updated": 1672587878856, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/nc73827531", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73827531.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 28, "net": "nc", "code": "73827531", "ids": ",nc73827531,", "sources": ",nc,", "types": ",nearby-cities,origin,phase-data,", "nst": 23, "dmin": 0.006372, "rms": 0.02, "gap": 46, "magType": "md", "type": "earthquake", "title": "M 1.4 - 6km W of Cobb, CA" }, "geometry": { "type": "Point", "coordinates": [ -122.7949982, 38.833168, 1.78 ] }, "id": "nc73827531" }, { "type": "Feature", "properties": { "mag": 1.24, "place": "7km SE of Alpine, CA", "time": 1672587315050, "updated": 1672587532699, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ci40152679", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ci40152679.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 24, "net": "ci", "code": "40152679", "ids": ",ci40152679,", "sources": ",ci,", "types": ",nearby-cities,origin,phase-data,scitech-link,", "nst": 19, "dmin": 0.1022, "rms": 0.16, "gap": 63, "magType": "ml", "type": "earthquake", "title": "M 1.2 - 7km SE of Alpine, CA" }, "geometry": { "type": "Point", "coordinates": [ -116.7026667, 32.7958333, 14.33 ] }, "id": "ci40152679" }, { "type": "Feature", "properties": { "mag": 1.9, "place": "5 km ESE of Point MacKenzie, Alaska", "time": 1672586787930, "updated": 1672586925480, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak0231wmhc9", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0231wmhc9.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 56, "net": "ak", "code": "0231wmhc9", "ids": ",ak0231wmhc9,", "sources": ",ak,", "types": ",origin,phase-data,", "nst": null, "dmin": null, "rms": 0.7, "gap": null, "magType": "ml", "type": "earthquake", "title": "M 1.9 - 5 km ESE of Point MacKenzie, Alaska" }, "geometry": { "type": "Point", "coordinates": [ -149.888, 61.3383, 33.1 ] }, "id": "ak0231wmhc9" }, { "type": "Feature", "properties": { "mag": 1.8, "place": "31 km W of Minto, Alaska", "time": 1672585860530, "updated": 1672587176094, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak0231wj7hh", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0231wj7hh.geojson", "felt": 1, "cdi": 2.2, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 50, "net": "ak", "code": "0231wj7hh", "ids": ",ak0231wj7hh,", "sources": ",ak,", "types": ",dyfi,origin,phase-data,", "nst": null, "dmin": null, "rms": 0.69, "gap": null, "magType": "ml", "type": "earthquake", "title": "M 1.8 - 31 km W of Minto, Alaska" }, "geometry": { "type": "Point", "coordinates": [ -150.0252, 65.1546, 18.1 ] }, "id": "ak0231wj7hh" }, { "type": "Feature", "properties": { "mag": 1.4, "place": "9km NNE of Beaumont, CA", "time": 1672585108280, "updated": 1672585779880, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ci40152671", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ci40152671.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 30, "net": "ci", "code": "40152671", "ids": ",ci40152671,", "sources": ",ci,", "types": ",focal-mechanism,nearby-cities,origin,phase-data,scitech-link,", "nst": 46, "dmin": 0.08868, "rms": 0.21, "gap": 50, "magType": "ml", "type": "earthquake", "title": "M 1.4 - 9km NNE of Beaumont, CA" }, "geometry": { "type": "Point", "coordinates": [ -116.9335, 34.0046667, 2.13 ] }, "id": "ci40152671" } ], "bbox": [ -151.5625, 32.7958333, 1.78, -116.7026667, 65.1546, 96.3 ] }

Imported data is readonly because it is essentially a computation. To make it editable, use the attribute editable.

:value(https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson editable {type:"application/json"})

{ "type": "FeatureCollection", "metadata": { "generated": 1672588168000, "url": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson", "title": "USGS All Earthquakes, Past Hour", "status": 200, "api": "1.10.3", "count": 6 }, "features": [ { "type": "Feature", "properties": { "mag": 2.5, "place": "43 km NW of Beluga, Alaska", "time": 1672587953250, "updated": 1672588150777, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak0231wqlwd", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0231wqlwd.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 96, "net": "ak", "code": "0231wqlwd", "ids": ",ak0231wqlwd,", "sources": ",ak,", "types": ",origin,phase-data,", "nst": null, "dmin": null, "rms": 0.47, "gap": null, "magType": "ml", "type": "earthquake", "title": "M 2.5 - 43 km NW of Beluga, Alaska" }, "geometry": { "type": "Point", "coordinates": [ -151.5625, 61.4574, 96.3 ] }, "id": "ak0231wqlwd" }, { "type": "Feature", "properties": { "mag": 1.35, "place": "6km W of Cobb, CA", "time": 1672587781720, "updated": 1672587878856, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/nc73827531", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73827531.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 28, "net": "nc", "code": "73827531", "ids": ",nc73827531,", "sources": ",nc,", "types": ",nearby-cities,origin,phase-data,", "nst": 23, "dmin": 0.006372, "rms": 0.02, "gap": 46, "magType": "md", "type": "earthquake", "title": "M 1.4 - 6km W of Cobb, CA" }, "geometry": { "type": "Point", "coordinates": [ -122.7949982, 38.833168, 1.78 ] }, "id": "nc73827531" }, { "type": "Feature", "properties": { "mag": 1.24, "place": "7km SE of Alpine, CA", "time": 1672587315050, "updated": 1672587532699, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ci40152679", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ci40152679.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 24, "net": "ci", "code": "40152679", "ids": ",ci40152679,", "sources": ",ci,", "types": ",nearby-cities,origin,phase-data,scitech-link,", "nst": 19, "dmin": 0.1022, "rms": 0.16, "gap": 63, "magType": "ml", "type": "earthquake", "title": "M 1.2 - 7km SE of Alpine, CA" }, "geometry": { "type": "Point", "coordinates": [ -116.7026667, 32.7958333, 14.33 ] }, "id": "ci40152679" }, { "type": "Feature", "properties": { "mag": 1.9, "place": "5 km ESE of Point MacKenzie, Alaska", "time": 1672586787930, "updated": 1672586925480, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak0231wmhc9", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0231wmhc9.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 56, "net": "ak", "code": "0231wmhc9", "ids": ",ak0231wmhc9,", "sources": ",ak,", "types": ",origin,phase-data,", "nst": null, "dmin": null, "rms": 0.7, "gap": null, "magType": "ml", "type": "earthquake", "title": "M 1.9 - 5 km ESE of Point MacKenzie, Alaska" }, "geometry": { "type": "Point", "coordinates": [ -149.888, 61.3383, 33.1 ] }, "id": "ak0231wmhc9" }, { "type": "Feature", "properties": { "mag": 1.8, "place": "31 km W of Minto, Alaska", "time": 1672585860530, "updated": 1672587176094, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak0231wj7hh", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0231wj7hh.geojson", "felt": 1, "cdi": 2.2, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 50, "net": "ak", "code": "0231wj7hh", "ids": ",ak0231wj7hh,", "sources": ",ak,", "types": ",dyfi,origin,phase-data,", "nst": null, "dmin": null, "rms": 0.69, "gap": null, "magType": "ml", "type": "earthquake", "title": "M 1.8 - 31 km W of Minto, Alaska" }, "geometry": { "type": "Point", "coordinates": [ -150.0252, 65.1546, 18.1 ] }, "id": "ak0231wj7hh" }, { "type": "Feature", "properties": { "mag": 1.4, "place": "9km NNE of Beaumont, CA", "time": 1672585108280, "updated": 1672585779880, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ci40152671", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ci40152671.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 30, "net": "ci", "code": "40152671", "ids": ",ci40152671,", "sources": ",ci,", "types": ",focal-mechanism,nearby-cities,origin,phase-data,scitech-link,", "nst": 46, "dmin": 0.08868, "rms": 0.21, "gap": 50, "magType": "ml", "type": "earthquake", "title": "M 1.4 - 9km NNE of Beaumont, CA" }, "geometry": { "type": "Point", "coordinates": [ -116.9335, 34.0046667, 2.13 ] }, "id": "ci40152671" } ], "bbox": [ -151.5625, 32.7958333, 1.78, -116.7026667, 65.1546, 96.3 ] }

If an id is added, the data can be used in a computation.

:value(#earthquake-data https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson {type:"application/json"})

:value[$(#earthquake-data).metadata]

{ "type": "FeatureCollection", "metadata": { "generated": 1672588168000, "url": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson", "title": "USGS All Earthquakes, Past Hour", "status": 200, "api": "1.10.3", "count": 6 }, "features": [ { "type": "Feature", "properties": { "mag": 2.5, "place": "43 km NW of Beluga, Alaska", "time": 1672587953250, "updated": 1672588150777, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak0231wqlwd", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0231wqlwd.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 96, "net": "ak", "code": "0231wqlwd", "ids": ",ak0231wqlwd,", "sources": ",ak,", "types": ",origin,phase-data,", "nst": null, "dmin": null, "rms": 0.47, "gap": null, "magType": "ml", "type": "earthquake", "title": "M 2.5 - 43 km NW of Beluga, Alaska" }, "geometry": { "type": "Point", "coordinates": [ -151.5625, 61.4574, 96.3 ] }, "id": "ak0231wqlwd" }, { "type": "Feature", "properties": { "mag": 1.35, "place": "6km W of Cobb, CA", "time": 1672587781720, "updated": 1672587878856, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/nc73827531", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73827531.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 28, "net": "nc", "code": "73827531", "ids": ",nc73827531,", "sources": ",nc,", "types": ",nearby-cities,origin,phase-data,", "nst": 23, "dmin": 0.006372, "rms": 0.02, "gap": 46, "magType": "md", "type": "earthquake", "title": "M 1.4 - 6km W of Cobb, CA" }, "geometry": { "type": "Point", "coordinates": [ -122.7949982, 38.833168, 1.78 ] }, "id": "nc73827531" }, { "type": "Feature", "properties": { "mag": 1.24, "place": "7km SE of Alpine, CA", "time": 1672587315050, "updated": 1672587532699, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ci40152679", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ci40152679.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 24, "net": "ci", "code": "40152679", "ids": ",ci40152679,", "sources": ",ci,", "types": ",nearby-cities,origin,phase-data,scitech-link,", "nst": 19, "dmin": 0.1022, "rms": 0.16, "gap": 63, "magType": "ml", "type": "earthquake", "title": "M 1.2 - 7km SE of Alpine, CA" }, "geometry": { "type": "Point", "coordinates": [ -116.7026667, 32.7958333, 14.33 ] }, "id": "ci40152679" }, { "type": "Feature", "properties": { "mag": 1.9, "place": "5 km ESE of Point MacKenzie, Alaska", "time": 1672586787930, "updated": 1672586925480, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak0231wmhc9", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0231wmhc9.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 56, "net": "ak", "code": "0231wmhc9", "ids": ",ak0231wmhc9,", "sources": ",ak,", "types": ",origin,phase-data,", "nst": null, "dmin": null, "rms": 0.7, "gap": null, "magType": "ml", "type": "earthquake", "title": "M 1.9 - 5 km ESE of Point MacKenzie, Alaska" }, "geometry": { "type": "Point", "coordinates": [ -149.888, 61.3383, 33.1 ] }, "id": "ak0231wmhc9" }, { "type": "Feature", "properties": { "mag": 1.8, "place": "31 km W of Minto, Alaska", "time": 1672585860530, "updated": 1672587176094, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak0231wj7hh", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0231wj7hh.geojson", "felt": 1, "cdi": 2.2, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 50, "net": "ak", "code": "0231wj7hh", "ids": ",ak0231wj7hh,", "sources": ",ak,", "types": ",dyfi,origin,phase-data,", "nst": null, "dmin": null, "rms": 0.69, "gap": null, "magType": "ml", "type": "earthquake", "title": "M 1.8 - 31 km W of Minto, Alaska" }, "geometry": { "type": "Point", "coordinates": [ -150.0252, 65.1546, 18.1 ] }, "id": "ak0231wj7hh" }, { "type": "Feature", "properties": { "mag": 1.4, "place": "9km NNE of Beaumont, CA", "time": 1672585108280, "updated": 1672585779880, "tz": null, "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ci40152671", "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ci40152671.geojson", "felt": null, "cdi": null, "mmi": null, "alert": null, "status": "automatic", "tsunami": 0, "sig": 30, "net": "ci", "code": "40152671", "ids": ",ci40152671,", "sources": ",ci,", "types": ",focal-mechanism,nearby-cities,origin,phase-data,scitech-link,", "nst": 46, "dmin": 0.08868, "rms": 0.21, "gap": 50, "magType": "ml", "type": "earthquake", "title": "M 1.4 - 9km NNE of Beaumont, CA" }, "geometry": { "type": "Point", "coordinates": [ -116.9335, 34.0046667, 2.13 ] }, "id": "ci40152671" } ], "bbox": [ -151.5625, 32.7958333, 1.78, -116.7026667, 65.1546, 96.3 ] }

[object Object]

☷ Advanced Formulas ↑ ↓

☷ Formulas With CSS Selectors and Multiple Values ↑ ↓

You can use almost any CSS selector in place of #id in $(#<id>). The value returned will be the contents of the value property on the element or (if not available) the value attribute or the innerText.

You can use commas to select multiple identifier named elements, e.g. :value[$(#id1, #id2, #id3)] is an array of the values associated with the elements :value(#id1)[3], :value(#id2)[2], :value(#id3)[1] and will be [3,2,1].

A value reference $(css-selector) can end in [] to indicate multiple values should be returned as an array if the selector does not contain a comma. This allows tables to be treated somewhat like spreadsheets.

☷ Macro List Formatting ↑ ↓

The SECST formula evaluator supports supports some utility functions.

☷ JavaScript ↑ ↓

You can use any JavaScript that is available in WebWorkers inside a macro. A special read-only document object is also made available. This object has title, baseURI, location, and navigator properties along with a property for each meta tag name and value.

:p({style:"text-align:left;float:right"})[
  My right content
]
:p[
  Left Content
  More left content
]

☷ Transpiling ↑ ↓

☷ Configuring, Extending, And Programming ↑ ↓

☷ Complete List Of Tags ↑ ↓

The documentation below is generated directly from SECST source code.

&

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

plain text

@facebook

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  href: transform href(value)
  target: string

Content Allowed:

plain text

@github

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  href: transform href(value)
  target: string

Content Allowed:

plain text

@linkedin

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  href: transform href(value)
  target: string

Content Allowed:

plain text

@twitter

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  href: transform href(value)
  target: string

Content Allowed:

plain text

NewsArticle JSON schema, Google SEO info

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

article, author, datePublished, footer, forEach, forEntries, h, h1, h2, h3, h4, h5, h6, h7, h8, header, headline, img, link, mermaidChart, p, repl, section, sheetMusic, theme, title, toc

article html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

author JSON schema

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

Person, name

Person JSON schema

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

name

name html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

plain text

datePublished JSON schema

Transformation Impacts: N/A

Attributes Allowed:

  format: transform format(value)
  lang: string

Content Allowed:

plain text

footer html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, p, pre, q, samp, strike, strong, sub, sup, u, var

a html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

abbr html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

b html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

bold html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

code html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

del html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

em html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

i html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

ins html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

italic html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

kbd html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

mark html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

meta html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

p html

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  align: one of [left, right]
  style: transform style(value)
  textAlign: one of [left, center, right, justify]

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, a, abbr, b, blockquote, bold, br, code, del, details, dl, em, emoji, escape, footnote, hashtag, hr, i, img, input, ins, italic, kbd, latex, mark, meta, ol, pre, q, question, samp, strike, strong, sub, sup, table, textarea, transpiled, u, ul, value, var

blockquote html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

br html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

details html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

dl html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

emoji emoji catalog, additional info

Transformation Impacts: N/A

Attributes Allowed:

  filter: string
  grayscale: transform grayscale(value)
  greyscale: transform greyscale(value)

Content Allowed:

plain text

escape

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

plain text

footnote html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

hashtag

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

plain text

hr html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

img html

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  align: one of [top, middle, bottom, left, right]
  alt: string
  decoding: one of [sync, async, auto]
  fetchpriority: one of [high, low, auto]
  height: number
  ismap: boolean
  loading: one of [eager, lazy]
  referrerpolicy: one of [no-referrer, no-referrer-when-downgrade, origin, origin-when-corss-origin, same-origin, strict-origin, strict-origin-when-cross-origin]
  src: isURL(value)
  static: boolean
  title: string
  url: transform url(value)
  width: number

Content Allowed:

N/A

input html

Transformation Impacts: N/A

Attributes Allowed:

  title: custom validation object
  type: one of [checkbox, color, date, datetime-local, email, month, number, password, radio, range, tel, text, time, url, week]
  value: true

Content Allowed:

N/A

latex html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

ol html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

pre html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

q html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

question html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

samp html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

strike html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

strong html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

sub html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

sup html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

table html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

caption, tbody, tfoot, thead, tr

caption html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

u html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

var html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u

tbody html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

tr

tr html

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  rowspan: transform rowspan(value)

Content Allowed:

td, th

td html

Transformation Impacts: N/A

Attributes Allowed:

  colspan: transform colspan(value)

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, a, abbr, b, blockquote, bold, br, code, del, details, dl, em, emoji, escape, footnote, hashtag, hr, i, img, input, ins, italic, kbd, latex, mark, meta, ol, pre, q, question, samp, strike, strong, sub, sup, table, textarea, transpiled, u, ul, value, var

textarea html

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  disabled: true
  readonly: true
  value: true

Content Allowed:

plain text

transpiled html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, NewsArticle, a, abbr, article, b, blockquote, bold, br, code, del, details, dl, em, emoji, escape, footer, footnote, forEach, forEntries, h, h1, h2, h3, h4, h5, h6, h7, h8, hashtag, header, hr, i, img, input, ins, italic, kbd, latex, link, listeners, macro, mark, mermaidChart, meta, ol, p, pre, q, question, repl, samp, section, sheetMusic, strike, strong, style, sub, sup, table, textarea, theme, title, toc, transpiled, u, ul, value, var

forEach

Transformation Impacts: N/A

Attributes Allowed:

  iterable: transform iterable(value)

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, NewsArticle, a, abbr, answer, article, b, blockquote, bold, br, caption, class, code, dd, del, details, dl, dt, em, emoji, escape, footer, footnote, forEach, forEntries, h, h1, h2, h3, h4, h5, h6, h7, h8, hashtag, header, hr, i, img, input, ins, italic, kbd, latex, li, link, macro, mark, mermaidChart, meta, ol, p, pre, q, question, repl, samp, section, sheetMusic, slot, strike, strong, style, sub, summary, sup, table, tbody, td, text, textarea, tfoot, th, thead, theme, title, toc, tr, transpiled, u, ul, value, var

answer html

Transformation Impacts: N/A

Attributes Allowed:

  literal: transform literal(value)
  type: one of [hidden]
  value: true

Content Allowed:

plain text

class html

Transformation Impacts: N/A

Attributes Allowed:

  name: string

Content Allowed:

plain text

dd html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, a, abbr, b, blockquote, bold, br, code, del, details, em, emoji, escape, footnote, hashtag, hr, i, img, input, ins, italic, kbd, latex, mark, meta, ol, pre, q, question, samp, strike, strong, sub, sup, table, textarea, transpiled, u, ul, value, var

ul html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

value

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  default: transform default(value)
  disabled: transform disabled(value)
  editable: transform editable(value)
  extract: transform extract(value)
  fitcontent: transform fitcontent(value)
  format: transform format(value)
  globalThis: transform globalThis(value)
  hidden: true
  literal: transform literal(value)
  plaintext: transform plaintext(value)
  readonly: transform readonly(value)
  src: transform src(value)
  static: true
  template: transform template(value)
  title: custom validation object
  type: custom validation object
  url: transform url(value)
  value: true

Content Allowed:

plain text

dt html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, a, abbr, b, blockquote, bold, br, code, del, details, em, emoji, escape, footnote, hashtag, hr, i, img, input, ins, italic, kbd, latex, mark, meta, ol, pre, q, question, samp, strike, strong, sub, sup, table, textarea, transpiled, u, ul, value, var

forEntries

Transformation Impacts: N/A

Attributes Allowed:

  object: transform object(value)

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, NewsArticle, a, abbr, answer, article, b, blockquote, bold, br, caption, class, code, dd, del, details, dl, dt, em, emoji, escape, footer, footnote, forEach, forEntries, h, h1, h2, h3, h4, h5, h6, h7, h8, hashtag, header, hr, i, img, input, ins, italic, kbd, latex, li, link, macro, mark, mermaidChart, meta, ol, p, pre, q, question, repl, samp, section, sheetMusic, slot, strike, strong, style, sub, summary, sup, table, tbody, td, text, textarea, tfoot, th, thead, theme, title, toc, tr, transpiled, u, ul, value, var

h html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

h1 html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

h2 html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

h3 html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

h4 html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

h5 html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

h6 html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

h7 html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

h8 html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

header html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, p, pre, q, samp, strike, strong, sub, sup, u, var

li html

Transformation Impacts: N/A

Attributes Allowed:

  type: transform type(value)
  value: transform value(value)

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, a, abbr, b, blockquote, bold, br, code, del, details, dl, em, emoji, escape, footnote, hashtag, hr, i, img, input, ins, italic, kbd, latex, mark, meta, ol, pre, q, question, samp, strike, strong, sub, sup, table, textarea, transpiled, u, ul, value, var

link html

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  href: transform href(value)
  rel: one of [stylesheet]
  url: transform url(value)

Content Allowed:

N/A

macro

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

mermaidChart

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

plain text

repl html , Medium: How To Host A REPL

Transformation Impacts: N/A

Attributes Allowed:

  body: transform body(value)
  css: transform css(value)
  head: transform head(value)
  javascript: transform javascript(value)
  linenumbers: transform linenumbers(value)
  replstyle: string

Content Allowed:

slot

slot html

Transformation Impacts: N/A

Attributes Allowed:

  hidden: boolean
  linenumbers: transform linenumbers(value)
  name: string
  readonly: boolean

Content Allowed:

plain text

section html

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  level: number

Content Allowed:

NewsArticle, article, footer, forEach, forEntries, h, h1, h2, h3, h4, h5, h6, h7, h8, header, img, link, macro, mermaidChart, p, repl, section, sheetMusic, theme, title, toc

sheetMusic

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

plain text

theme

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

class, link, style

style html

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  selector: true

Content Allowed:

plain text

title html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

plain text

toc

Transformation Impacts: Attributes may differ from the below since the tag is transformed and transient attributes may be deleted. See the detailed documentation for the tag.

Attributes Allowed:

  toggle: transform toggle(value)

Content Allowed:

plain text

summary html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

a, abbr, b, bold, code, del, em, i, ins, italic, kbd, mark, meta, pre, q, samp, strike, strong, sub, sup, u, var

text html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, a, abbr, b, blockquote, bold, br, code, del, details, dl, em, emoji, escape, footnote, hashtag, hr, i, img, input, ins, italic, kbd, latex, mark, meta, ol, pre, q, question, samp, strike, strong, sub, sup, table, textarea, transpiled, u, ul, value, var

tfoot html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

plain text

th html

Transformation Impacts: N/A

Attributes Allowed:

  colspan: transform colspan(value)

Content Allowed:

&, @facebook, @github, @linkedin, @twitter, a, abbr, b, blockquote, bold, br, code, del, details, dl, em, emoji, escape, footnote, hashtag, hr, i, img, input, ins, italic, kbd, latex, mark, meta, ol, pre, q, question, samp, strike, strong, sub, sup, table, textarea, transpiled, u, ul, value, var

thead html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

tr

listeners html

Transformation Impacts: N/A

Attributes Allowed:

N/A

Content Allowed:

N/A

headline JSON schema

Transformation Impacts: N/A

Attributes Allowed:

  level: true

Content Allowed:

plain text

☷ Design Objectives ↑ ↓

Note, not all design objectives are fully implemented.

• Easy to understand, simple syntax, semantic
• Easy to learn, limited syntax, semantic
• Forgiving, auto corrects nesting, table column count, etc.
• Easy to extend, uniform syntax, declarative language elements li[Secure, transpiler ensures security, also see :a({"href":"#security"})[Security]]
• Performant, simple syntax reduces parser work, although iterating over tag object definitions can take time
• Small, simple syntax reduces parser size, although tag object definitions can take up memory
• Configurable, declarative language elements
• Comprehensive, all of semantic HTML and more (extensible)
• Computational, reactivity built-in, advanced math built in, simple user input mechanisms
• Programmable, simple event handling plus API
• Styled, code highlighting built-in, optional CSS capability
• Portable, HTML output with asset bundling options li[SEO Friendly, browser or server rendering, meta tags driven by hashtags and an explicit :code[:keywords[]] tag]

☷ Grammar ↑ ↓

All SECST markup takes one of two forms:

• :<tag>[<content>...] where code:[<content>] is SECST markup ans text.
• :<tag>(#<id> .<class>... <unaryattribute>... <attributes>...)[<content>...] where <id>, <class> space separated list, <unaryattribute> space separated list, <attributes> JSON5 object are all optional, but must be provided in that order if present.

In some cases, e.g. for :hr, :br, and :value the trailing [] are optional.

The reference implementation uses a PEG parser and this grammar:

{ function* flattenContent(content) { if(Array.isArray(content)) { for(const item of content) { if(Array.isArray(item)) { for(const flat of flattenContent(item)) { yield flat; } } else if(item!==undefined) { if(item?.content) { item.content = [...flattenContent(item.content)].reduce((array,item,i) => { if(typeof(item)==="string" && typeof(array[i-1])==="string") { array[i-1] += item; } else { array.push(item); } return array; },[]); } yield item; } } } return content; } var Tag = options.Tag; var JSON5 = options.JSON5; } start = _ content:content* _ { return [...flattenContent(content)]; } content = (&colon expression _?) / [ a-z0-9_\-~!@#$%^&*()_+=\[\{\]\}|\\;:"'<,>.?/\n\r\t]i colon = ":" expression = &colon tag:tag options:options? bracketed_SECST:bracketed_SECST { const content = bracketed_SECST || []; return new Tag({tag,options,content,location:location()}); } mheading = [\r\n] [ \t]* hashes:[#]+ " " text:[^\r\n]* { return new Tag({tag:"h",options:{attributes:{level:Math.min(hashes.length,6)}},content:[text.join("")]}) } hr = ":hr" options:options? bracketed_SECST:bracketed_SECST? { return new Tag({tag:"hr",options,location:location()}) } mhr = [\r\n] [ \t]* '***' [ \t]* [\r\n] { return new Tag({tag:"hr",content:[],location:location()}) } murl = _ url:url _ { return new Tag({tag:"a",content:[url[1]],location:location()}) } mbold = "**" strike:[^*\t\r\n]+ "**" { return new Tag({tag:"b",content:[strike.join("")],location:location()}) } mitalic = "*" italic:[^*\t\r\n]+ "*" { return new Tag({tag:"i",content:[italic.join("")],location:location()}) } mblockquote = [\r\n] [ \t]* "> " text:[^\r\n]* { return new Tag({tag:"blockquote",content:[text.join("")],location:location()}) } msubscript = "~" sub:[^~ \t\r\n]+ "~" { return new Tag({tag:"sub",content:[sub.join("")],location:location()}) } msupscript = "^" sup:[^\^ \t\r\n]+ "^" { return new Tag({tag:"sup",content:[sup.join("")],location:location()}) } mstruck = "~~" strike:[^~\t\r\n]+ "~~" { return new Tag({tag:"strike",content:[strike.join("")],location:location()}) } mmark = "==" mark:[^=\t\r\n]+ "==" { return new Tag({tag:"mark",content:[mark.join("")],location:location()}) } br = ":br" options:options? bracketed_SECST:bracketed_SECST? { return new Tag({tag:"br",options,location:location()}) } value = ":value" options:options? bracketed:bracketed? { const content = bracketed ? [`${bracketed.substring(1,bracketed.length-1)}`] : []; return new Tag({tag:"value",options,content,location:location()}); } escape = ":escape" options:options? bracketed:bracketed { const content = [`${bracketed.substring(1,bracketed.length-1)}`] ; return new Tag({tag:"escape",options,content,location:location()}); } script = ":script" options:options? bracketed:bracketed { const content = [`${bracketed.substring(1,bracketed.length-1)}`] ; return new Tag({tag:"script",options,content,location:location()}); } code = ":code" options:options? bracketed:bracketed { const content = [`${bracketed.substring(1,bracketed.length-1)}`] ; return new Tag({tag:"code",options,content,location:location()}); } symbol = ampersand special:[\#a-z0-9]i* ";" {; return new Tag({tag:"&",content:[special.join("")],location:location()}) } ampersand = "&" emoji = colon first:[a-z] rest:[a-z0-9]i* colon { return new Tag({tag:"emoji",content:[first+rest.join("")],location:location()}) } hashtag = _ hash tag:[a-z0-9\-]i* options:options? content:bracketed_SECST { return new Tag({tag:"hashtag",options,content:tag.length>0 ? [tag.join("")] : content,location:location()}) } hash = "#" mention = at site:[a-z0-9]i* options:options? content:bracketed_SECST { return new Tag({tag:"@"+site.join(""),options,content,location:location()}); } at = "@" bracketed_SECST = BRACKETOPEN value:(mheading/mbold/mitalic/mhr/murl/msubscript/msupscript/mstruck/mblockquote/mmark/backtickquoted/triplebacktickquoted/symbol/hashtag/mention/escape/script/code/value/hr/br/emoji/expression/not_bracketed/bracketed_SECST)* BRACKETCLOSE { if(Array.isArray(value) && value.every((item) => typeof(item)==="string")) { return [value.join("")]; } const result = []; for(let i=0;i<value.length item="value[i];" text="[" if(typeof(result[result.length-1])!="="string")" +="" typeof(item)="=="string")" if(item.tag="=="blockquote")" prev="result[result.length-1]" while(typeof(prev)="=="string")" if(prev.trim().length="==0)" if(prev?.tag="=="blockquote")" prev.content="[...prev.content,new" prevtype="typeof(result[result.length-1]);" if(prevtype="=="string"" bracketed="BRACKETOPEN" not_bracketed="not:(!BRACKETCLOSE" bracketopen="[" bracketclose="" braced="BRACEOPEN" not_braced="not:(!BRACECLOSE" braceopen="{" braceclose="" backtickquoted="start:BACKTICKOPEN" not_backtickquoted="not:(!BACKTICKCLOSE" backtickopen="`" backtickclose="char:[^`]" triplebacktickquoted="start:TRIPLEBACKTICKOPEN" string="start+text.join("")+end;" not_triplebacktickquoted="not:(!TRIPLEBACKTICKOPEN" triplebacktickopen="```" triplebacktickclose="char:[^`]" tag="colon" options="(" o="{};" o.id="id;" o.classlist="classList;" o.attributes="JSON5.parse(attributes)" ;i++)="" { ="" const="" ="" if(array.isarray(item))="" item.join("="" ")="" "]"; ="" result.push(text); ="" }="" else="" result[result.length-1]="" } ="" if(item="" &&="" {="" //="" combine="" sequential="" block="" quotes ="" let="" result.pop(); ="" tag({tag:"br"}),...item.content] ="" result.push(item); ="" strings ="" return="" result; ="" } ="" value:(not_bracketed/bracketed)*="" "["="" value.join("")="" "]" ="" !bracketopen.)="" not.join(""); ="" ="" value:(not_braced/braced)*="" "{"="" "}" ="" !braceopen.)="" ="" text:(not_backtickquoted/backtickquoted)*="" end:backtickclose="" new="" tag({tag:"code",content:[start+text.join("")+end],location:location()}) ="" !backtickopen.)="" not.join("");} ="" char:[^`]="" char ="" '`'="" text:(not_triplebacktickquoted/triplebacktickquoted)*="" end:triplebacktickclose="" tag({tag:"code",content:[string="" (string.includes("\n")="" ?="" ""="" :="" "\n")]}) ="" !triplebacktickclose.)="" '```'="" token:token="" token="" _="" id:id?="" classlist:class*="" binaryattributes:binaryattribute*="" attributes:braced?="" ")"="" var="" try="" ||="" {}; ="" catch(e)="" error("unable="" to="" parse="" attributes.="" check="" for="" missing="" commas="" or="" quotes.") ="" binaryattributes.foreach(([key,value])="" ==""> { o.attributes[key] = value; }); return o; } id = "#" token:token { return token } class = "." cls:classname { return cls } classname = start:[_a-z\-]i rest:[_a-z0-9\-]i* { return start + rest.join("") } binaryattribute = attr:(_ hidden _ / _ checked _ / _ grayscale _ / _ greyscale _ / _ disabled _ / _ editable _ / _ fitcontent _ / _ literal _ / _ open _ / _ plaintext _ / _ readonly _ / _ reversed _ / _ run _ / _ selected _ / _ static _ / _ toggle _ / _ url _ / _ visible _) { return attr[1] } hidden = "hidden" { return ["hidden",""] } checked = "checked" { return ["checked",""] } grayscale = "grayscale" { return ["grayscale",""] } greyscale = "greyscale" { return ["greyscale",""] } editable = "editable" { return ["editable",""] } disabled = "disabled" { return ["disabled",""] } fitcontent = "fitcontent" { return ["fitcontent",""] } literal = "literal" { return ["literal",""] } plaintext = "plaintext" { return ["plaintext",""] } readonly = "readonly" { return ["readonly",""] } reversed = "reversed" { return ["reversed",""] } run = "run" { return ["run",""] } open = "open" { return ["open",""] } selected = "selected" { return ["selected",""] } static = "static" { return ["static",""] } toggle = "toggle" { return ["toggle",""] } url = prefix:urlprefix path:[a-z0-9_\-~`!@#$%^&*_+=|\\:;'<,>.?/]i* { if(prefix.startsWith(".#")) { return ["url","#"+path.join("")] } try { new URL(path.join(),document.baseURI); return ["url",prefix+path.join("")]; } catch(e) { error(e+"") } } visible = "visible" { return ["visible",""] } urlprefix = "https://" / "./" / ".#" token = start:[a-z~!$%&*:@#]i rest:[a-z$%&*:@#0-9_\-]i* { return start + rest.join("") } quoted = [\"] value:string [\"] { return value } string = value:[ a-z0-9_\-~`!@#$%^&*()_+=\{\}\[\]|\\:;'<,>.?/]i* { return value.join("") } _ "whitespace" = whitespace:[ \t\n\r]* { return whitespace.join("") }</value.length>

☷ Architecture ↑ ↓

{
  attributesAllowed: { // optional
      <attributeName>: true || "<primitive-type>" : function, // the function can validate or transform the attribute
      ...
  },
  contentAllowed: boolean || function || {<tagName>: Tag,...}, // optional
  transform(node) { // optional
      // a function body that can validate and manipulate the parsed tag
      // e.g. replace SECST attribute names with valid HTML attribute names or classes, map  :code[{language:"javascript"}] to the CSS class :code[.language-javascript] for use by HighlightJS.
      return node;
  },
  beforeMount(node) { // optional
      // a function body that can map SECST tag names to HTML tag names that are not valid in SECST
      // e.g. :code[transpiled] to :code[span] or :code[div]
      // node.tag = "div"
      return node;
  },
  toJSONLD(node) { // optional
      const jsonld = ...
       // a function body to override built-in JSONLD generation
      return jsonld;
  }
  toInnerHTML(node) { // optional
      const html = ...
      // a function body to generate the :code[innerHTML] for a tag in place of SECST iterating over parsed content for the tag.
      return html;
  }
  toText(node) { // optional
      const text = ...
      // a function body to generate text inside a :code[<span>] as a :strong[replacement] for the tag in place of SECST iterating over parsed content for the tag.
  }
  render(el,node) { // optional
      // a function body to manipulate the element based on the parsed node in some custom manner
  }
  mounted(el,node) { // optional
      // called when the element is added to a DOM tree that is not yet connected to a document
      // a function body that can make adjustments to the generated element before it is rendered, e.g. call HighlightJS with the :code[innerHTML] and replace it.
  },
  connected(el,node) { // optional
      // a function body that is called after all nodes have been added to a document in the order they were added to the document, e.g. re-compute sizes that can't be done easily with CSS
  }
  listeners: { // optional, responds to events on all occurrences of the tag
      <event-name>(event) {
          // function body, event.target will be the occurrence of the HTML element generated by the Tag
      },
      ...
  },
  ... // any other functions are added to the element generated by the tag.
}

{
  tag:<tag-name>,
  attributes:{<attribute-name>:<attribute-value>,...}
  classNames: Array // will be changed to use a Set,
  content: [string || <node>, ...]
}

☷ Security ↑ ↓

Note, not all security features are fully implemented and tested in this release

• Prevents DOM clobbering by ensuring ids do not conflict with key DOM components, e.g. head, body.
• Does not allow the use of variables for attribute values.
• Executes all value functions in WebWorkers that will timeout if they take too long.
• Does not support "on" event handlers and limits the use of styling directly on HTML elements.
• Sanitizes CSS content used in the :style[] tag.
• Only passes attributes to HTML that are valid for the associated tag

☷ Release History (Reverse Chronological Order) ↑ ↓

2023-01-01 v0.0.3a - Started publishing release history. Documented use of command line when secst is installed as a dev dependency.

☷ Copyright and License ↑

Copyright 2022, AnyWhichWay LLC

Documentation License: Creative Commons Attribution v4.0

Code License: AGPL-3.0

Visit SECST on GitHub to participate in SECST's further development.