My HTML Page

header

underline header

underline sticky header

Text

Standard Text

This is a paragraph of text. It contains some bold text to highlight terms, some italic text to reference or quote other sources, some code snippets and of course you can include links to other pages.
You can also include code boxes:

const example = "This is a code boxe" function exampleFunc() { return example}

and note boxes:

Note: This page demonstrates the use of b.CSS and b.JS for styling and functionality. You can switch between light and dark modes using the buttons at the top right.

Auto Fill

You can automatically fill test using the Auto_Fil function. It can be seamlessly integrated into your html.

-> {{text-01}} {{text-02}}

The text data must be a list of dictionaries. In this case there's one dictionary element, with two keys: text-01 and text-02

let textToFill = [ { "text-01":"This text was filled in via the Auto_Fill function. ", "text-02":"And this text was also filled in via the Auto_Fill function. " }

In your html you need to provide the target id and the keys in double curly brackets {{key}}:

In your script part you have to callAuto_Fill

Auto_Fill(textToFill,"id-text-01")

The Auto_Fill function works also for mutliple entries. This table was filled via AutoFill:

Country	City	River	Food
{{Country}}	{{City}}	{{River}}	{{Food}}

The data:

let tableToFill = [ {"Country": "Germany", "City": "Munich", "River": "Isar", "Food": "Beer"}, {"Country": "France", "City": "Paris", "River": "Seine", "Food": "Baguette"}, {"Country": "Italy", "City": "Rome", "River": "Tiber", "Food": "Pasta"}, {"Country": "Spain", "City": "Madrid", "River": "Manzanares", "Food": "Paella"}, {"Country": "Japan", "City": "Tokyo", "River": "Sumida", "Food": "Sushi"}, {"Country": "USA", "City": "New York", "River": "Hudson", "Food": "Burger"} ]

The html:

<table> <thead> <tr> <th>Country</th> <th>City</th> <th>River</th> <th>Food</th> </tr> </thead> <tbody id="id-tbody-01"> <tr> <td>{{Country}}</td> <td>{{City}}</td> <td>{{River}}</td> <td>{{Food}}</td> </tr> </tbody> </table>

The code:

Auto_Fill(tableToFill,"id-tbody-01")

Auto Fill Batch

Auto_Fill_Batch is an extension of Auto_Fill to handle large data sets with better performance. The usage is similar to Auto_Fill. Auto_Fill_Batch processes the data in batches per second. Here is an example of how to use Auto_Fill_Batch to fill a table with 600 entries:

Country	City	River	Food
{{Country}}	{{City}}	{{River}}	{{Food}}

Show Ego Code

With the function ShowHTMLinTextArea you can display the html code of the ego html page, explaining the structure of your site. In contrast to Auto_Fill you need to pass over the actual DOM elements, the source element whos innerHTML shall be exposed and the target div where the innerHTML shall be shown.

HTML

The function ShowHTMLinTextArea works also for script parts. When the third argument is set to true, then the outerHTML is shown.

MarkDown

The class clsMarkDown can convert markdown text to HTML and back from HTML to markdown. The functionality is demonstrated below:

Source (markdown)	Back from HTML

HTML Code	HTML Output