Please note that some styles can be used directly in 'Writing view' mode and some can only be used in 'HTML View' mode but we still try to make their use as easy for you as possible.

Image Top Post

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Inline text elements

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Blockquote

A well-known quote, contained in a blockquote element.

Other style formats you can use:

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Someone famous in Source Title

Lists

Unstyled

List style with class list-unstyled.

This is a list.
It appears completely unstyled.
Structurally, it's still a list.
However, this style only applies to immediate child elements.
Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
This may still come in handy in some situationss.

Inline

List style with class list-inline.

This is a list item.
And another one.
But they're displayed inline.

List style normal.

This is a list item.
And another one.
But they're displayed inline.

List Style

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The left padding has also been reset

Here’s an ordered list
With a few list items
- This way they have a more even appearance
- Particularly when followed by more list items
It has the same overall look
As the previous unordered list

Syntax Highlighter

This format is used to write lines of HTML code in posts, usually used on blogs with coding themes or blogging tutorials.

Style CSS

pre {
  --copy-text: "Copy";
  --copied-text: "Copied!";
  --code-bg: #2a2833;
  --code-color: #9a92be;
  --code-color-comment: #787878;
  --code-color-string: #ffcd81;
  --code-color-selector: #a38eff;
  --code-color-property: #a38eff;
  --code-color-tag: #6a6684;
  --code-color-tag-name: #eeebfe;
  --code-color-attr: #c3b6ff;
  --code-color-class: #eeebff;
  --code-color-number: #ffcd95;
  position: relative;
  font-family: SFMono-Regular, monospace;
}

pre > code {
  background-color: var(--code-bg);
  color: var(--code-color);
  display: block;
  overflow-x: auto;
  white-space: pre;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.hljs-copy {
  position: absolute;
  border: 0 none;
  inset: 0.5rem 0.5rem auto auto;
  padding: 0.5rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: 0.3s background-color;
  font-size: 14px;
}

.hljs-copy:hover { background-color: rgba(0, 0, 0, 0.75) }
.hljs-copy::before { content: var(--copy-text) }
.hljs-copy.is-copied::before { content: var(--copied-text) }

.hljs-name,
.hljs-section { color: var(--code-color-tag-name) }
.hljs-tag { color: var(--code-color-tag) }
.hljs-selector-class { color: var(--code-color-class) }
.hljs-number { color: var(--code-color-number) }

.hljs-comment,
.hljs-meta { color: var(--code-color-comment) }

.hljs-emphasis,
.hljs-quote,
.hljs-string,
.hljs-strong,
.hljs-template-variable,
.hljs-variable { color: var(--code-color-string) }

.hljs-keyword,
.hljs-selector-tag,
.hljs-type { color: var(--code-color-selector) }

.hljs-attribute,
.hljs-bullet,
.hljs-literal,
.hljs-symbol { color: var(--code-color-property) }

.hljs-attr,
.hljs-selector-attr,
.hljs-selector-id,
.hljs-selector-pseudo,
.hljs-title { color: var(--code-color-attr) }

Style JS

async function initHighlight() {
  const loadScript = () => new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js'
    script.onload = resolve
    script.onerror = reject
    document.body.appendChild(script)
  })

  try {
    await loadScript()
    hljs.highlightAll()
  } catch (error) {
    console.error(error)
  }
}

function addCopyButtons (codeBlock) {
  if (!navigator || !navigator.clipboard) return

  const clipboard = navigator.clipboard
  const $button = document.createElement('button')
  $button.className = 'hljs-copy'

  $button.addEventListener('click', function () {
    clipboard.writeText(codeBlock.textContent).then(function () {
      $button.blur()
      $button.classList.add('is-copied')
      $button.disabled = true

      setTimeout(function () {
        $button.disabled = false
        $button.classList.remove('is-copied')
      }, 2000)
    })
  })

  const pre = codeBlock.parentNode
  pre.insertBefore($button, pre.firstChild)
}

function initCodeBlocks () {
  const codeBlocks = document.querySelectorAll('pre > code')
  if (codeBlocks.length === 0) return

  initHighlight()
  
  codeBlocks.forEach(function (codeBlock) {
    addCopyButtons(codeBlock)
  })
}

initCodeBlocks()

Table

Using the most basic table markup, here’s how .table-based tables look in Bootstrap.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Accordion

Accordion Item #1

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Accordion Item #2

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Accordion Item #3

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

Note Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris lorem, laoreet in dolor nec.

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

External Link

If there are external links contained in a post, you can notify users by using this feature:

Sample_external_link

Button Link

Primary Secondaryk Success Danger Warning Info

Alternative style

Alternative style of buttons using icons

Downoad Demo Check out More info

Note: You can also add other icons using <svg>

Two buttons in one bar:

Downoad Demo

Lazy Youtube

Video and Audio Player

Video and audio players are built using plugins from plyr.io.

Audio Player

Video Player

Post Reference

To add a list of references or credits to the article you wrote:

Referensi:

Admin October 23, 2023 at 8:59 PM

Test admin
1. Inputekno October 23, 2023 at 9:01 PM
  
  test balasan pengunjung
2. Admin October 23, 2023 at 9:14 PM
  
  mantap puh
Inputekno October 23, 2023 at 9:26 PM

komentar pengunjung
1. Inputekno November 2, 2023 at 10:21 PM
  
  test comments
2. Inputekno November 6, 2023 at 5:30 PM
  
  tes comments 2
3. Inputekno November 6, 2023 at 5:31 PM
  
  test comments 3

All Style, Text and Writing Formats and Other Additional Features