hexo icon indicating copy to clipboard operation
hexo copied to clipboard

Support additional options for Backtick Code Block

Open TimonPeng opened this issue 9 months ago • 5 comments

What does it do?

Support additional options for Backtick Code Block.

Screenshots

Before:

Before

After:

After

Source markdown:

Markdown

Pull request tasks

  • [x] Add test cases for the changes.
  • [ ] Passed the CI test.

Issue #4830

Syntax of Backtick Code Block is:

[language] [title] [url] [link text] [additional options]

I was going to simply use split spaces to extract it, but the problem is... If do it with this way, then won't be able to use spaces in the title and link text, which is barely ok, but not what I want.

  1. the first one [language] is sure there's no spaces
  2. the second one [title] might have spaces
  3. the third one [url] must be a link
  4. the fourth one [link text] might have spaces
  5. the fifth one [additional options] must have a colon and probably have spaces

It also would be chaos to matching with regex too, although I did write:

/(\w+)\s+(.+?)\s+(?=http)([\S]+)\s+(.+?)\s+((?:\w+:\S+\s*)+)/

.exec('java title https://google.com google mark:1,4-7,10 wrap:true');

[
  'java title https://google.com google mark:1,4-7,10 wrap:true',
  'java',
  'title',
  'https://google.com',
  'google',
  'mark:1,4-7,10 wrap:true',
  index: 0,
  input: 'java title https://google.com google mark:1,4-7,10 wrap:true',
  groups: undefined
]

.exec('python Backtick Code Syntax https://flask.palletsprojects.com/en/2.3.x/ Flask Docs mark:1,5-7 wrap:true')

[
  'python Backtick Code Syntax https://flask.palletsprojects.com/en/2.3.x/ Flask Docs mark:1,5-7 wrap:true',
  'python',
  'Backtick Code Syntax',
  'https://flask.palletsprojects.com/en/2.3.x/',
  'Flask Docs',
  'mark:1,5-7 wrap:true',
  index: 0,
  input: 'python Backtick Code Syntax https://flask.palletsprojects.com/en/2.3.x/ Flask Docs mark:1,5-7 wrap:true',
  groups: undefined
]

In the end I decided to use the same code logic as the Code Block Plugin(lib/plugins/tag/code.js), which is simpler and easier to synchronise updates and maintain.

TimonPeng avatar Sep 21 '23 09:09 TimonPeng