@yozora/tokenizer-image-reference

github flavor markdown spec

Syntax for images is like the syntax for links, with one difference. Instead of link text, we have an image description. The rules for this are the same as for link text, except that

• a) an image description starts with ![ rather than [, and
• b) an image description may contain links. An image description has inline elements as its contents. When an image is rendered to HTML, this is standardly used as the image’s alt attribute.

• See github flavor markdown spec for details.
• See Live Examples for an intuitive impression.

Install

npm

npm install --save @yozora/tokenizer-image-reference

Yarn

yarn add @yozora/tokenizer-image-reference

pnpm

pnpm add @yozora/tokenizer-image-reference

Usage

tip

@yozora/tokenizer-image-reference has been integrated into @yozora/parser / @yozora/parser-gfm-ex / @yozora/parser-gfm, so you can use YozoraParser / GfmExParser / GfmParser directly.

Basic Usage

@yozora/tokenizer-image-reference cannot be used alone, it needs to be registered in Parser as a plugin-in before it can be used.

import { DefaultParser } from '@yozora/core-parser'
import ParagraphTokenizer from '@yozora/tokenizer-paragraph'
import TextTokenizer from '@yozora/tokenizer-text'
import ImageReferenceTokenizer from '@yozora/tokenizer-image-reference'

const parser = new DefaultParser()
  .useFallbackTokenizer(new ParagraphTokenizer())
  .useFallbackTokenizer(new TextTokenizer())
  .useTokenizer(new ImageReferenceTokenizer())

// parse source markdown content
parser.parse(`
![foo][]

[foo]: /url "title"
`)

YozoraParser

import YozoraParser from '@yozora/parser'

const parser = new YozoraParser()

// parse source markdown content
parser.parse(`
![foo][]

[foo]: /url "title"
`)

GfmParser

import GfmParser from '@yozora/parser-gfm'

const parser = new GfmParser()

// parse source markdown content
parser.parse(`
![foo][]

[foo]: /url "title"
`)

GfmExParser

import GfmExParser from '@yozora/parser-gfm-ex'

const parser = new GfmExParser()

// parse source markdown content
parser.parse(`
![foo][]

[foo]: /url "title"
`)

Options

Name	Type	Required	Default
name	string	false	"@yozora/tokenizer-image-reference"
priority	number	false	TokenizerPriority.LINKS

• name: The unique name of the tokenizer, used to bind the token it generates, to determine the tokenizer that should be called in each life cycle of the token in the entire matching / parsing phase.

• priority: Priority of the tokenizer, determine the order of processing, high priority priority execution. interruptable. In addition, in the match-block stage, a high-priority tokenizer can interrupt the matching process of a low-priority tokenizer.

  Exception: Delimiters of type full are always processed before other type delimiters.

Types

@yozora/tokenizer-image-reference produce ImageReference type nodes. See @yozora/ast for full base types.

import type {
  Alternative,
  Association,
  Node,
  Reference,
} from '@yozora/ast'

export const ImageReferenceType = 'imageReference'
export type ImageReferenceType = typeof ImageReferenceType

/**
 * ImageReference represents an image through association, or its original
 * source if there is no association.
 * @see https://github.github.com/gfm/#images
 * @see https://github.com/syntax-tree/mdast#imagereference
 */
export interface ImageReference extends
  Node<ImageReferenceType>,
  Association,
  Reference,
  Alternative {}

Live Examples

Full style

• Basic.

  #590

  yozora

    

  pretty-json

    

  ![foo][bar] [bar]: /url

  1
  2
  3
  ![foo][bar]
  
  [bar]: /url

Collapsed style

• Basic.

  #592

  yozora

    

  pretty-json

    

  ![foo][] [foo]: /url "title"

  1
  2
  3
  ![foo][]
  
  [foo]: /url "title"

• The labels are case-insensitive.

  #594

  yozora

    

  pretty-json

    

  ![Foo][] [foo]: /url "title"

  1
  2
  3
  ![Foo][]
  
  [foo]: /url "title"

• As with reference links, whitespace is not allowed between the two sets of brackets.

  #595

  yozora

    

  pretty-json

    

  ![foo] [] [foo]: /url "title"

  1
  2
  3
  4
  ![foo] 
  []
  
  [foo]: /url "title"

Shortcut styled

• Basic.

  #596

  yozora

    

  pretty-json

    

  ![foo] [foo]: /url "title"

  1
  2
  3
  ![foo]
  
  [foo]: /url "title"

• Note that link labels cannot contain unescaped brackets.

  #598

  yozora

    

  pretty-json

    

  ![[foo]] [[foo]]: /url "title"

  1
  2
  3
  ![[foo]]
  
  [[foo]]: /url "title"

• The link labels are case-insensitive。

  #599

  yozora

    

  pretty-json

    

  ![Foo] [foo]: /url "title"

  1
  2
  3
  ![Foo]
  
  [foo]: /url "title"

• If you just want a literal ! followed by bracketed text, you can backslash-escape the opening [.

  #600

  yozora

    

  pretty-json

    

  !\[foo] [foo]: /url "title"

  1
  2
  3
  !\[foo]
  
  [foo]: /url "title"

• If you want a link after a literal !, backslash-escape the !.

  #601

  yozora

    

  pretty-json

    

  \![foo] [foo]: /url "title"

  1
  2
  3
  \![foo]
  
  [foo]: /url "title"

Related

• @yozora/ast
• @yozora/parser
• @yozora/parser-gfm
• @yozora/parser-gfm-ex
• @yozora/tokenizer-image
• @yozora/react-image
• @yozora/react-markdown
• Sourcecode
• ImageReference | Yozora AST
• Images | Github Flavor Markdown Spec
• ImageReference | Mdast