An custom html element that will render gem-text as html
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
sloum b7884a18bb Fixes pre blocks to not have initial newline, unless input by user. Adds new css. Adds a part to a tags. 2 months ago
README.md Minor udpates to readme 2 months ago
example.html Fixes pre blocks to not have initial newline, unless input by user. Adds new css. Adds a part to a tags. 2 months ago
gemtext.js Fixes pre blocks to not have initial newline, unless input by user. Adds new css. Adds a part to a tags. 2 months ago

README.md

gem-text HTML element

This repository contains a js file (gemtext.js) that can be used in web projects to add a <gem-text> element.

Usage

Include the js either at the end of the file or in the head with a defer attribute (the below assumes that the js is in the same folder as the html that is including it, adjust as needed):

<script type="text/javascript" src="gemtext.js" defer></script>

Then use the gem-text element in your html:

<gem-text>
  # I am a heading

  This is some text

  * List item 1
  * List item 2

  * New list, with one item

  => tildegit.org A cool git host

  ``` Pre block example
  This    is
      some
    te    xt
  ```

  ## Another heading

  More text
</gem-text>

The gem-text element can take an optional attribute, hroot, which will change the heading elements in the given gemtext to fit the page structure. So if hroot=2 was given as an attribute on the gem-text element any level one headings in the actual gemtext content will be rendered as an h2 (and any level two headings will be rendered as an h3, and so on). If the hroot is set high enough then multiple levels of headings may all get caught as h6 (as html does not go any higher, so any that would go beyond 6 are rendered as h6).

You can also add gem-text elements to the dom dynamically via javascript.

Styling

Any of the elements within the shadow dom created by the gem-text element can be styled via the ::part(...) pseudo-selector. For example, to style the links:

gem-text::part(a) {
  color: pink;
  background-color: #222;
}

The following elements are available for styling (within a "part" attached to the gem-text element):

  • body
    • This refers to the top level element of gem-text element
  • p
  • a
  • h1, h2, h3
    • These link up to the heading level originally used in the gemtext. Even if you had an hroot of 6 so that only h6 elements were actually rendered you could still style the #, ##, and ### based elements separately
  • ul
  • li
  • pre
  • blockquote