Parsing html and other tags

[TW_Tones]

@TiddlyTitch

TBH @TW_Tones I tend to think the flex you looking for is already there in @pmario’s Custom Markup ???

Yes, hence this whole thread, I have long had my eye on what I have called “arbitrary html tags” but custom markup goes a lot further (and in fact could complement this), here is some of an example stylesheet I was just playing with;

section-title {
  background-color: #e6e6e6;
  width: 100%;
  display: block;
  text-align: left;
  font-size: 1.2em;
  border-style: solid 1px;
  padding: 0 .5em 0 .5em;
}

section-title-centered {
  background-color: #e6e6e6;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 1.2em;
  border-style: solid 1px;
  padding: 0 .5em 0 .5em;
}

.thin ( 
   line-height: 0.2em;
 }

section-dim {
 color: #d9d9d9;
}

hidden { display: none; }

shadow-box {
  width: 96%;
  display: block;
  padding: 0 .5em 0 .5em;
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #888888;
  margin: 0 5px 0 5px 0;
}

inset-box {
  width: 95%;
  display: block;
  padding: 0 .5em 0 .5em;
  border: 3px solid;
  border-color; black;
  border-style: inset;
  margin: 0 5px 0 5px 0;
}

outset-box {
  width: 95%;
  display: block;
  padding: 0 .5em 0 .5em;
  border: 3px solid;
  border-color; black;
  border-style: outset;
  margin: 0 5px 0 5px 0;
}

lhs {
  float: left;
  width: 49%;
}

rhs {
  float: right;
  width: 49%;
}

rhs-aside {
  float: right;
  width: 33%;
}

// need to clear float https://www.w3schools.com/css/css_float_clear.asp

no-wrap {
  word-break: normal; 
  word-wrap: break-word;
  white-space: pre-wrap;
}

However this css/html element css is not half of the issue, without wishing to harp on it, the key to this full idea is to parse and extract such sections from the text.

Parsing html and other tags

For example, lets say I have this;

quick-list {
  word-break: normal; 
  word-wrap: break-word;
  white-space: pre-wrap;
}

• now I want a viewTemplate addon to find each

<quick-list>
Item 1
item 2
item 3
</quick-list>

• in the current tiddler
• Then I will parse each line into an optional todo item
  • With a checkbox and + to create, and more like my older quicklist solution The quickest and easiest ever todolist in tiddlywiki ? Requires 5.2.0 but only acting on the content of the quick-list tag.

Incidentally except for hidden and rhs/lhs I am complying with the advice that @pmario stated. Thanks Mario yes I suppose I can just make quicklist into quick-list, and dull into dull-section etc …

As I shared earlier I expect to make a separate version of EditorToolbar-wrapper.json to separately curate these.

• Perhaps even to automatically find them in a named stylesheet tiddler, so you add a new html tag to the stylesheet and it appears in a custom wrapper dropdown.
• By the way an honorable mention needs to go to @Mohammad’s Shiraz and other element options. In fact I was looking in his work because I thought he had documented the parsing process, which I had contributed to in the past, I just can’t find it. arghhh…