Support folding code blocks

[stevenjoezhang]

PR Checklist

• The commit message follows guidelines for NexT.
• The changes have been tested (for bug fixes / features).
• Docs in NexT website have been added / updated (for features).

PR Type

• Bugfix.
• Feature.
• Improvement.
• Code style update (formatting, linting).
• Refactoring (no functional changes).
• Documentation.
• Translation.
• Other... Please describe:

What is the current behavior?

Issue resolved: #178
See also theme-next/hexo-theme-next#1732

What is the new behavior?

• Link to demo site with this changes:
• Screenshots with this changes:

How to use?

In NexT _config.yml:

codeblock:
  # Fold code block
  fold:
    enable: true
    threshold: 500

[coveralls]

Pull Request Test Coverage Report for Build 5665540687

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 97.416%

---

Totals
Change from base Build 5654367902:	0.0%
Covered Lines:	394
Relevant Lines:	399

---

💛 - Coveralls

[stevenjoezhang]

Possible regression: #508

[PeichengLiu]

I like this feature. While it just does not work with tabs. Non-default tab(s) is not folded. Is it designed on purpose?

[stevenjoezhang]

@PeichengLiu If a code block is within hidden tabs, the browser is unaware of the size of the code block (since it hasn't been rendered), so it doesn't know whether it exceeds the preset length and should be folded.

[PeichengLiu]

@stevenjoezhang True, while we can still fold the code on the fly based on the following event dispatched every time a tab gets switched.

hexo-theme-next/source/js/utils.js

Lines 225 to 228 in 408c1fa

	// Trigger event
	tActive.dispatchEvent(new Event('tabs:click', {
	bubbles: true
	}));

Please take this as a sample, I'm happy to create a pull request.

[stevenjoezhang]

@PeichengLiu Thanks, pull requests are welcomed!