Skip to main content
Version: 2.x.x

@yozora/tokenizer-image

Npm VersionNpm DownloadNpm LicenseModule formats: cjs, esmNode.js VersionTested with JestCode Style: prettier

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.

Install

npm install --save @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.

import YozoraParser from '@yozora/parser'

const parser = new YozoraParser()

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

Options

NameTypeRequiredDefault
namestringfalse"@yozora/tokenizer-image"
prioritynumberfalseTokenizerPriority.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.

      
      
  • 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.