Markdown | Surflane

사용 가능react-markdown / remark-gfm composition

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

같은 예시를 각 크기와 밀도에서 비교하세요. 전환하면 입력 값과 선택 상태가 유지됩니다. 크기 가이드와 비교

소스를 편집하면 미리보기가 업데이트됩니다.

Markdown 소스Markdown

렌더링된 미리보기실시간

Deployment

Review deployment results in a shared design language. Jump to Results or review the design tokens. The inline identifier is service_id.

Never convey status with color alone; provide a label and context with it.

Results

Environment	Status	Runs
Staging	Passed	12
Production	Needs review	3

Review the build logs
Confirm the next action

Example code

import { Button } from '@surflane/ui'

<Button onClick={inspect}>Inspect logs</Button>

environment: staging
retries: 3

~~Outdated guidance~~ is replaced by the current documentation.¹

This is a local rendering example. ↩

사용법

CommonMark 문서와 GFM 테이블, 작업 목록, 취소선, 각주를 공유 읽기 스타일로 렌더링합니다. 코드 펜스는 CodeBlock의 강조, 복사 액션, 가로 스크롤을 재사용합니다.

MDX나 실행 가능한 HTML을 렌더링하지 마세요. CommonMark나 GFM 소스를 전달하세요. 작업 목록은 읽기 전용이므로 폼 입력으로 사용하지 마세요. Checkbox를 사용하세요. 원격 문서 가져오기, 권한, 링크 대상, 이미지 표시 여부는 호출하는 화면이 결정합니다.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

named article → scoped heading hierarchy and anchors → prose / links / lists / blockquote → Table.ScrollArea / highlighted CodeBlock / notes

키보드와 접근성

Tab은 링크와 복사 버튼에 도달하고 Enter는 기본적으로 실행합니다. heading은 기본적으로 h2에서 시작합니다. 각 인스턴스의 내부 링크는 자신의 ID를 가리킵니다. HTML은 제외되고 기본 URL 정책은 안전하지 않은 URL을 차단합니다. 긴 테이블과 코드는 문서를 넘치게 하지 않고 각각 스크롤됩니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

// Needs react-markdown and remark-gfm: npm install react-markdown remark-gfm
import { Markdown } from '@surflane/ui/markdown'

<Markdown
  source={documentSource}
  label='Deployment guide'
  headingLevel={2}
  codeWrap={false}
/>

주요 API

Markdown — 공통 래퍼 props
Prop	설명	기본값
`source`	CommonMark + GitHub flavored Markdown 문자열	required
`label`	article과 중첩 code/table 영역 이름	Markdown content
`labels`	code(label, line), table(label, line), task, 그리고 코드 블록의 copy, copied, copyError 문구	English
`headingLevel`	Markdown h1을 이 의미 수준으로 렌더링; 더 깊은 heading은 h6으로 제한	2
`codeWrap`	복사된 텍스트를 바꾸지 않고 펜스 코드를 시각적으로 줄 바꿈	false
`ref / className`	루트 HTMLDivElement / 추가 클래스	—

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.