T-Markdown-Editor Demo

T-Markdown Editor: Example

# T-Markdown Editor

TMdEditor is a javascript markdown editor designed to be used in webpages to
render textarea for easy editing.
The project started with the source code of [SimpleMDE](https://simplemde.com/).
A few improvements have been made so that I would like to share the source codes
under a new name.

## Contents

[[toc]]

## Column-based Layout

The editor takes advantage of Bootstrap Grid system to create column-based layout in text editing.
Each row is composed of 12 columns. 
The following example provides a layout of 8 columns on the left and 4 columns on the right.
Depending on the size of the view port, it will be re-organize itself.
On thow that works, please refer to grid system documentation at [Bootstrap v4](http://getbootstrap.com) website.

:::: row
::: col lg-8 md-6 sm-12
#### Left Column

With more than 600mA current drawing from USB port, ==VBUS5V0== line (in yellow) drops below 4V for 3.4ms, as shown in Figure 1, causing ==3.3V== rail cutting off.

You can also include other blocks here.
```c
int main(int argc, char** argv) {
    return -1;
}
```
:::
::: col lg-4 md-6 sm-12
#### Right Column.

![Figure 1. USB 5V rail (in yellow) and 3.3V power rail waveform at the time when power failure occurs.](assets/oscillascope.JPG)
:::
::::

## Heading

H1-H6 provided below corresponding to the HTML tags `<h1>` to `<h6>`.

# Header Level 1
## Header Level 2
### Header Level 3
#### Header Level 4
##### Header Level 5
###### Header Level 6

---
You can use the following style if you wan tto match the styling of heading but not use the associated HTML element.

Header Level 1 {.h1}

Header Level 2 {.h2}

Header Level 3 {.h3}

Header Level 4 {.h4}

Header Level 5 {.h5}

Header Level 6 {.h6}

----

## Paragraph and inline texts

This is a regular paragraph.
Paragraph can extend to multiple lines.

This paragraph stands out. {.lead}

**Bold**  
****Extra Bold****  
*Italic*  
***Bold Italic***  
*****Extra Bold Italic*****  
~~strike through texts~~  
==mark==  
Inline codes: `$ source /opt/Xilinx/Vivado/2017.4/settings64.sh`

### Typographer
(c) (C) (r) (R) (tm) (TM) (p) (P) +-  
"Smartypants, double quotes" and 'single quotes'

----

## Lists

Number Lists

1. First Item
2. Second Item
3. Third Item

Unordered Lists

- Item 1
  - Nested 1.1
  - Nested 1.2
- Item 2
  - Nested 2.1
  - Nested 2.2

----

## Table

Simple Table

| Col 1 | Col 2   |
|=======|=========|
|Table Content 1| Table Content 2|
{.table .table-striped .table-bordered}

Table in multi-markdown format

|             |          Grouping           ||
First Header  | Second Header | Third Header |
 ------------ | :-----------: | -----------: |
Content       |          *Long Cell*        ||
Content       |   **Cell**    |         Cell |
New section   |     More      |         Data |
And more      | With an escaped '\|'         ||
[Prototype table]
{.table .table-striped .table-bordered}

----

## Block Quotes and Notification Boxes
 
Standard Block quotes
> There is a time in every man's education when he arrives at the conviction that envy is ignorance; 
> that imitation is suicide; that he must take himself for better, for worse, as his portion; 
> that though the wide universe is full of good, no kernel of nourishing corn can come to him 
> but through his toil bestowed on that plot of ground which is given to him to till. 
> The power which resides in him is new in nature, and none but he knows what that is which he can do, 
> nor does he know until he has tried.
> 
> -- <cite>Emmerson</cite>

Block quotes can also be extended to notification boxes with attributes tags

> #### Notification - Primary {.bq-title}
> Some details
> {.bq-primary}

> #### Notification Success {.bq-title}
> Some details
> {.bq-success}

> #### Notification Warning {.bq-title}
> Some details
> {.bq-warning}

> #### Danger {.bq-title}
> Some details
> {.bq-danger}

----

## Code Highlight

Here are a few examples

### Verilog HDL

```verilog
`timescale 1ns / 1ps

module project1_demo(
        input clk,
        output [15:0] led,
        output [7:0] seg,
        output [3:0] an
    );

reg [23:0] counter = 24'd0;
    reg divclk = 1'b0;

/* Clock Divider: 100MHz -> 10Hz (100ms) */
    always @(posedge clk)
    begin
        if (counter == 24'd4999999) begin
            divclk <= ~divclk;
            counter <= 24'd0;
        end
        else begin
            divclk <= divclk;
            counter <= counter + 1'd1;
        end
    end

assign led = led_reg;
    assign an = 4'h0;
    assign seg = seg_reg;

endmodule
```

### TCL Code (constraints file)

```tcl
# Clock signal
#Bank = 34, Sch name = CLK100MHZ
set_property PACKAGE_PIN W5 [get_ports clk]
set_property IOSTANDARD LVCMOS33 [get_ports clk]
create_clock -add -name sys_clk_pin -period 10.00 -waveform {0 5} [get_ports clk]
```

### C Code
```c
#include "xparameters.h"
#include "xil_types.h"

// Macro that stores the base address of your controller
#define LED_BASEADDR XPAR_MYLED_0_S_AXI_BASEADDR

int main() {

// Declare volatile integer i
    volatile int i = 0;

// Turn off all LEDs
    *((u32 *) LED_BASEADDR) = 0x00;

// Infinite loop
    while (1) {

// Flip LED Status
        *((u32 *) LED_BASEADDR) = ~ *((u32 *) LED_BASEADDR);

// Delay Function
        for (i = 0; i < 10000000; i++);
    }
    return 1;
}
```

### ARM Assembly

```arm
push {r4, r5, r6, lr}
movw r1, #16383 ; 0x3fff
mov r3, #0
mov r2, #32
mov r6, #40
str r1, [r0, #12]
pop {r4, r5, r6, pc}
```

----

## Images

![Figure 2. Inline Image.](assets/oscillascope.JPG)

![Figure 3. Float Right.](assets/DSC03298.jpg) {.pull-right}

----
## Mathematics

Mathematics is supported in Latex style

$$E=mc^2$$

Inline Mathmatic: $E=mc^2$

$$x > y$$

$$(\sqrt{3x-1}+(1+x)^2)$$
                    
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

Multiline Mathematic Equations:

$$
\displaystyle
\left( \sum_{k=1}^n a_k b_k \right)^2
\leq
\left( \sum_{k=1}^n a_k^2 \right)
\left( \sum_{k=1}^n b_k^2 \right)
$$

$$
\displaystyle 
    \frac{1}{
        \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        } 
    }
$$

$$
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
$$