docs(react): add codeline highlight (#242)

# Overview fix #202  ## PR Checklist - [ ] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/slash/blob/main/.github/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Jonghyeon Ko <[email protected]>
toss · Oct 22, 2023 · 70aa3a9 · 70aa3a9
1 parent 880c096
commit 70aa3a9
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 32 deletions.
diff --git a/docs/src/pages/docs/react/ErrorBoundary.en.mdx b/docs/src/pages/docs/react/ErrorBoundary.en.mdx
@@ -8,7 +8,7 @@ this component can handle any errors in children
 
 If there is any thrown error in children of `<ErrorBoundary/>`, Error will be caught and then fallback will be rendered.
 
-```tsx
+```tsx /ErrorBoundary/ /fallback/
 import { ErrorBoundary } from '@suspensive/react'
 import { useState, useEffect } from 'react'
 
@@ -55,7 +55,7 @@ Define component as `<ErrorBoundary/>`'s fallback
 
 If you want to deliver a declared component as `<ErrorBoundary/>`'s fallback, you can use the `ErrorBoundaryFallbackProps` type to declare the component easily.
 
-```tsx
+```tsx /ErrorBoundaryFallbackProps/
 import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
 
 const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => (
@@ -113,7 +113,7 @@ const Example = () => (
 
 If you want to reset `<ErrorBoundary/>` by component where is outside of `<ErrorBoundary/>`'s fallback. Inject any resetKey in resetKeys. resetKeys work only when at least one element of array is changed. you don't need to worry about provide new array as resetKeys like how useEffect's dependency array work.
 
-```tsx
+```tsx /resetKeys/
 import { ErrorBoundary } from '@suspensive/react'
 import { useState } from 'react'
 
@@ -135,7 +135,7 @@ const Example = () => {
 
 This is a callback that is called first when `<ErrorBoundary/>` reset. It can be used with @tanstack/react-query as follows.
 
-```tsx
+```tsx /onReset/
 import { ErrorBoundary } from '@suspensive/react'
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
 
@@ -162,7 +162,7 @@ const Example = () => (
 
 This is a callback called when `<ErrorBoundary/>` catches an error.
 
-```tsx
+```tsx /onError/
 import { ErrorBoundary } from '@suspensive/react'
 
 const logError = (error: Error, info: ErrorInfo) => {
@@ -178,15 +178,11 @@ const Example = (
 
 ## useErrorBoundary
 
-<Callout type="warning">
-
-useErrorBoundary is experimental feature, this interfaces could be changed
-
-</Callout >
+<Callout type="warning">useErrorBoundary is experimental feature, this interfaces could be changed</Callout>
 
 In children of `<ErrorBoundary/>`, we can use useErrorBoundary().setError to make `<ErrorBoundary/>` aware of the Error without throw.
 
-```tsx
+```tsx /useErrorBoundary/
 import { ErrorBoundary, useErrorBoundary } from '@suspensive/react'
 import { useEffect } from 'react'
 
@@ -216,7 +212,7 @@ We can use withErrorBoundary to wrap component by `<ErrorBoundary/>` easily.
 we don't need to make unncessary code to wrap it if we use withErrorBoundary like below.
 withErrorBoundary's 2nd parameter is props of `<ErrorBoundary/>` without children
 
-```tsx
+```tsx /withErrorBoundary/
 import { withErrorBoundary, useErrorBoundary } from '@suspensive/react'
 
 const Example = withErrorBoundary(
@@ -233,6 +229,7 @@ const Example = withErrorBoundary(
 
 Controlling multiple `<ErrorBoundary/>`s
 
-`<ErrorBoundary/>` is more powerful when used with `<ErrorBoundaryGroup/>`. Control multiple `<ErrorBoundary/>`s with `<ErrorBoundaryGroup/>`. Details are introduced in [`<ErrorBoundaryGroup/>` page](./ErrorBoundaryGroup).
+`<ErrorBoundary/>` is more powerful when used with `<ErrorBoundaryGroup/>`. Control multiple `<ErrorBoundary/>`s with `<ErrorBoundaryGroup/>`.  
+Details are introduced in [`<ErrorBoundaryGroup/>` page](./ErrorBoundaryGroup).
 
 </Callout>
diff --git a/docs/src/pages/docs/react/ErrorBoundary.ko.mdx b/docs/src/pages/docs/react/ErrorBoundary.ko.mdx
@@ -8,7 +8,7 @@ import { Callout } from 'nextra/components'
 
 `<ErrorBoundary/>`의 children에 error가 발생하면 error는 잡히고 fallback이 렌더링됩니다.
 
-```tsx
+```tsx /ErrorBoundary/ /fallback/
 import { ErrorBoundary } from '@suspensive/react'
 import { useState, useEffect } from 'react'
 
@@ -55,7 +55,7 @@ const ErrorAfter4s = () => {
 
 `<ErrorBoundary/>`'의 fallback으로 컴포넌트를 전달하고 싶다면 `ErrorBoundaryFallbackProps` 타입을 활용해 쉽게 컴포넌트를 선언 할 수 있습니다.
 
-```tsx
+```tsx /ErrorBoundaryFallbackProps/
 import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
 
 const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => (
@@ -113,7 +113,7 @@ const Example = () => (
 
 `<ErrorBoundary/>`의 fallback 외부에 있는 컴포넌트가 `<ErrorBoundary/>`를 reset하려면 resetKeys배열에 resetKey를 할당하면 됩니다. resetKeys는 배열의 하나 이상의 요소가 변경된 경우에만 작동합니다. useEffect의 종속성 배열이 작동하는 방식과 같이 resetKeys로 매 렌더링마다 새 배열을 주입하는 것을 걱정할 필요도 없습니다.
 
-```tsx
+```tsx /resetKeys/
 import { ErrorBoundary } from '@suspensive/react'
 import { useState, useEffect } from 'react'
 
@@ -135,7 +135,7 @@ const Example = () => {
 
 `<ErrorBoundary/>`가 reset할 때 먼저 호출되는 callback입니다. @tanstack/react-query와는 아래와 같이 사용할 수 있습니다.
 
-```tsx
+```tsx /onReset/
 import { ErrorBoundary } from '@suspensive/react'
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
 
@@ -162,7 +162,7 @@ const Example = () => (
 
 `<ErrorBoundary/>`가 error를 잡을 때 호출되는 callback입니다.
 
-```tsx
+```tsx /onError/
 import { ErrorBoundary } from '@suspensive/react'
 
 const logError = (error: Error, info: ErrorInfo) => {
@@ -178,15 +178,11 @@ const Example = (
 
 ## useErrorBoundary
 
-<Callout type="warning">
-
-useErrorBoundary는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.
-
-</Callout >
+<Callout type="warning">useErrorBoundary는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.</Callout>
 
 `<ErrorBoundary/>`의 children에서 useErrorBoundary().setError을 사용해 throw 없이도 `<ErrorBoundary/>`에서 Error를 알도록 할 수 있습니다.
 
-```tsx
+```tsx /useErrorBoundary/
 import { ErrorBoundary, useErrorBoundary } from '@suspensive/react'
 import { useEffect } from 'react'
 
@@ -216,7 +212,7 @@ withErrorBoundary를 사용하면 컴포넌트를 `<ErrorBoundary/>`로 쉽게
 아래와 같이 withErrorBoundary를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
 withErrorBoundary의 두 번째 인자는 children이 없는 `<ErrorBoundary/>`의 props입니다.
 
-```tsx
+```tsx /withErrorBoundary/
 import { withErrorBoundary, useErrorBoundary } from '@suspensive/react'
 
 const Example = withErrorBoundary(
@@ -233,6 +229,7 @@ const Example = withErrorBoundary(
 
 다수의 `<ErrorBoundary/>`를 제어하기
 
-`<ErrorBoundary/>`은 `<ErrorBoundaryGroup/>`과 사용하면 더 강력하게 사용할 수 있습니다. `<ErrorBoundaryGroup/>`로 다수의 `<ErrorBoundary/>`를 제어하세요. 자세한 내용은 [`<ErrorBoundaryGroup/>`페이지](./ErrorBoundaryGroup)에서 소개합니다.
+`<ErrorBoundary/>`은 `<ErrorBoundaryGroup/>`과 사용하면 더 강력하게 사용할 수 있습니다. `<ErrorBoundaryGroup/>`로 다수의 `<ErrorBoundary/>`를 제어하세요.  
+자세한 내용은 [`<ErrorBoundaryGroup/>`페이지](./ErrorBoundaryGroup)에서 소개합니다.
 
 </Callout>
diff --git a/docs/src/pages/docs/react/Suspense.en.mdx b/docs/src/pages/docs/react/Suspense.en.mdx
@@ -8,7 +8,7 @@ import { Callout } from 'nextra/components'
 
 fallback works the same as fallback of original React's Suspense.
 
-```tsx
+```tsx /Suspense/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
@@ -31,7 +31,7 @@ Control multiple `<Suspense/>`s default fallback with `<SuspensiveProvider/>`. D
 
 `<Suspense.CSROnly/>` will return fallback in server. After mount(in client) return children. Since mount only happens on the client, server-side rendering can be avoided.
 
-```tsx
+```tsx /Suspense/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
@@ -55,7 +55,7 @@ You can use withSuspense to wrap component by `<Suspense/>` easily.
 we don't need to make unncessary code to wrap it if we use withSuspense like below.
 withSuspense's 2nd parameter is props of `<Suspense/>` without children
 
-```tsx
+```tsx /withSuspense/
 import { withSuspense } from '@suspensive/react'
 
 const Example = withSuspense(

diff --git a/docs/src/pages/docs/react/Suspense.ko.mdx b/docs/src/pages/docs/react/Suspense.ko.mdx
@@ -8,7 +8,7 @@ import { Callout } from 'nextra/components'
 
 fallback은 react의 Suspense의 fallback와 동일하게 동작합니다.
 
-```tsx
+```tsx /Suspense/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
@@ -30,7 +30,7 @@ Default fallback
 
 `<Suspense.CSROnly/>`는 서버에서는 fallback을 반환합니다. mount 후(클라이언트에서는) children을 반환합니다. mount는 클라이언트에서만 일어나기 때문에 서버사이드 렌더링을 피할 수 있습니다.
 
-```tsx
+```tsx /Suspense/
 import { Suspense } from '@suspensive/react'
 
 const Example = () => (
@@ -54,7 +54,7 @@ withSuspense를 사용하면 컴포넌트를 `<Suspense/>`로 쉽게 래핑할
 아래와 같이 withSuspense를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
 withSuspense의 두 번째 인자는 children이 없는 `<Suspense/>`의 props입니다.
 
-```tsx
+```tsx /withSuspense/
 import { withSuspense } from '@suspensive/react'
 
 const Example = withSuspense(

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "clean": "pnpm --filter \"./packages/**\" run clean",
     "commit": "cz",
     "dev": "pnpm prepack && turbo run dev --parallel",
+    "dev:docs": "turbo run dev --scope='@suspensive/docs'",
     "dev:visualization": "turbo run dev --scope='@suspensive/visualization'",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "graph": "rimraf ./graph && mkdir graph && turbo run build --graph=graph/index.html",