Element 04: Semi Automatic Table of Content Which is Very imple

Pilihan kedua ini akan menambahkan table of content secar otomatis di postingan anda, hanya kekurangannya akan menambahkan setiap tag heading kedalam ToC, urutannya mungkin akan berantakan atau error jika tag heading yang anda tulis teratur

Kekurangan lain dari fitur ini adalah teks yang terbaca hanya sebatas teks latin(A-Z, a-z, 0-9), juga harus dipastikan tidak ada atribut tambahan (misal style='...') dalam tag heading Anda

Table of Contents

1. Image with Caption and Auto Lightbox
2. Image with Grid Layout
3. Image with Show All Function
4. Image with Scroll Layout
5. Lazy Load Image
6. Manual Related Post
7. Post Break
8. Paragraph with Text Indent 
9. Paragraph with Drop Cap 
10. Blockquote
11. Note Block 
12. Table
13. Manual Table of Content
14. Semi Automatic Table of Content
15. Syntax Highlighter 
16. MultiTabs Syntax Highlighter
17. Toggle Show/Hide
18. Toggle Content or Accordion 
19. External Link 
20. Button Link 
21. Download Link 
22. Lazy Youtube 
23. Post Reference 

Pilihan termudah untuk menampilkan Table of Content. Fitur ini akan menampilkan semua tag heading dalam postingan Anda (tiga tingkat h1 - h4), untuk itu pastikan Anda menulis tag heading secara berurutan.

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='toContent'></div>
</details> 

Tambahkan script ini diujung postingan Anda untuk mengaktifkan ToC Semi otomatis.

<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>