hannacode Insert any HTML tag with attributes, using Hanna Code

[Jonathan Lahijani]

Here's a little Hanna Code snippet I wrote that allows you to insert a tag that contains any HTML element of your choice along with any attributes.  The only defined Hanna Code variables are "element" and "comment".  If you leave element empty, it will automatically use the "div" HTML element.  The "comment" variable is optional and doesn't get outputted on the frontend.  It is only for internal use and if you want to actually describe what the Hanna Code is doing.

Import these two into Hanna Code:

"tag"

!HannaCode:tag:eyJuYW1lIjoidGFnIiwidHlwZSI6IjIiLCJjb2RlIjoiXC8qaGNfYXR0clxuZWxlbWVudD1cImRpdlwiXG5jb21tZW50PVwiXCJcbmhjX2F0dHIqXC9cbjw/cGhwXG5cL1wvaWYoIGVtcHR5KCRhdHRyW1wiZWxlbWVudFwiXSkgKSByZXR1cm47XG4kcmV0dXJuID0gJzwnLiRhdHRyW1wiZWxlbWVudFwiXTtcbmZvcmVhY2goJGF0dHIgYXMgJGsgPT4gJGEpIHtcbiAgICBpZiggJGsgPT0gXCJlbGVtZW50XCIgfHwgJGsgPT0gXCJjb21tZW50XCIgKSBjb250aW51ZTtcbiAgICBpZiggIWVtcHR5KCRhKSApICRyZXR1cm4gLj0gJyAnLiRrLic9XCInLiRhLidcIic7XG59XG4kcmV0dXJuIC49ICc+JztcbmVjaG8gJHJldHVybjsifQ==/!HannaCode

"end-tag"

!HannaCode:end-tag:eyJuYW1lIjoiZW5kLXRhZyIsInR5cGUiOiIyIiwiY29kZSI6IlwvKmhjX2F0dHJcbmVsZW1lbnQ9XCJkaXZcIlxuaGNfYXR0cipcL1xuPD9waHBcblwvXC9pZiggZW1wdHkoJGF0dHJbXCJlbGVtZW50XCJdKSApIHJldHVybjtcbiRyZXR1cm4gPSAnPFwvJy4kYXR0cltcImVsZW1lbnRcIl0uJz4nO1xuZWNobyAkcmV0dXJuOyJ9/!HannaCode

Now for some examples:

Example 1: Section

[[tag element="section"]]

will output...
<section>

Example 2: Section with class

[[tag element="section" class="myclass myotherclass"]]

will output...
<section class="myclass myotherclass">

Example 3: Section with id

[[tag element="section" id="myid"]]

will output...
<section id="myid">

Example 4: Section with inline styles

[[tag element="section" style="color:red"]]

will output...
<section style="color:red">

Example 5: Section with any attributes you want (data attributes for instance)

[[tag element="section" my-custom-attribute="test-value" data-something="cool"]]

will output...
<section my-custom-attribute="test-value" data-something="cool">

Example 6: Same as above with "element" not defined (defaults to "div")

[[tag my-custom-attribute="test-value" data-something="cool"]]

will output...
<div my-custom-attribute="test-value" data-something="cool">

Example 7: Same as above with "comment" set (which does not get outputted)

[[tag my-custom-attribute="test-value" data-something="cool" comment="Don't remove this line or your page will get totally messed up!"]]

will output...
<div my-custom-attribute="test-value" data-something="cool">

Example 8: Close section tag

[[end-tag element="section"]]

will output...
</section>

Example 9: Close div tag

[[end-tag]]

will output...
</div>

Example with a common Bootstrap rows and columns scenario:

[[tag class="row"]]

[[tag class="col-sm-6"]]

This is the first col.

[[end-tag comment="end of first col"]]

[[tag class="col-sm-6"]]

This is the first col.

[[end-tag comment="end of second col"]]

[[end-tag comment="end of row"]]

--

Note the following article regarding the terms "element" and "tag": http://perfectionkills.com/tag-is-not-an-element-or-is-it/

[shango]

Wow! Super useful. Makes user columns simpler for me.

[flydev]

Hey @Jonathan Lahijani this snippet is super useful, but I encounter an issue.

I have a body field with 3895 words and some call to this hannacode to build Bootstrap columns.

 

The issue is the following:

Wihtout the snippet, the page load in 200ms. With the snippet, it load between 1.8 and 3 seconds.

 

Any idea ?

[flydev]

Just a heads-up on this,

Really strange, when using nested hannacode, each nested hannacode add 100ms to TTFB. I saw old issue on Github and a commit about nested hannacode but I ask myself if it was tested with a lot of content and something than more than 30 hannacode in the same body field.

I used RockReplacer from @bernhard and the whole page load in 200ms instead of 1.8s.

 

It was used like: [[tag element="div" class="row"]] [[tag element="div" class="col-6"]] $content [[end-tag]] [[end-tag]]