@yozora/tokenizer-image

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

Yarn

yarn add @yozora/tokenizer-image

pnpm

pnpm add @yozora/tokenizer-image

Usage

tip

@yozora/tokenizer-image 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 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 ImageTokenizer from '@yozora/tokenizer-image'

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

// parse source markdown content
parser.parse(`
![foo](/url "title")
`)

YozoraParser

import YozoraParser from '@yozora/parser'

const parser = new YozoraParser()

// parse source markdown content
parser.parse(`
![foo](/url "title")
`)

GfmParser

import GfmParser from '@yozora/parser-gfm'

const parser = new GfmParser()

// parse source markdown content
parser.parse(`
![foo](/url "title")
`)

GfmExParser

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

const parser = new GfmExParser()

// parse source markdown content
parser.parse(`
![foo](/url "title")
`)

Options

Name	Type	Required	Default
name	string	false	"@yozora/tokenizer-image"
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 produce Image type nodes. See @yozora/ast for full base types.

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

export const ImageType = 'image'
export type ImageType = typeof ImageType

/**
 * Image represents an image.
 * @see https://github.com/syntax-tree/mdast#image
 * @see https://github.github.com/gfm/#images
 */
export interface Image extends
  Node<ImageType>,
  Resource,
  Alternative {}

Live Examples

• Basic.

  #580

  yozora

    

  pretty-json

    

  

  1
  ![foo](/url "title")

• Though this spec is concerned with parsing, not rendering, it is recommended that in rendering to HTML, only the plain string content of the image description be used. Note that in the above example, the alt attribute’s value is foo bar, not foo [bar](/url) or foo <a href="/url">bar</a>. Only the plain string content is rendered, without formatting.

  #584

  yozora

    

  pretty-json

    

  ![foo *bar*][] [foo *bar*]: train.jpg "train & tracks"

  1
  2
  3
  ![foo *bar*][]
  
  [foo *bar*]: train.jpg "train & tracks"

Related

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