발행 시간: 2025-04-12T03:40:00.000Z

추가 구문

Rino.js는 HTML에 마크다운 렌더링, 빌드 타임 템플릿 스크립트, 인라인 에셋 내보내기 기능을 추가합니다.

마크다운

재사용할 마크다운은 mds/에 저장하고 rino-import로 불러옵니다.

<script rino-type="md" rino-import="intro" rino-tag="section" class="intro"></script>

이 코드는 mds/intro.md를 읽습니다. .md 확장자는 생략합니다. rino-type="markdown"도 사용할 수 있으며, rino-tag를 생략하면 기본 래퍼는 div입니다.

HTML 안에 마크다운을 직접 작성할 수도 있습니다.

<script rino-type="markdown" rino-tag="section" type="text/markdown">
  ## 안녕하세요

  HTML 파일 안의 **마크다운**입니다.
</script>

빌드 타임 JavaScript와 TypeScript

템플릿 스크립트는 페이지 생성 중 실행되며 표준 출력을 HTML에 삽입합니다. 브라우저에서 실행되는 스크립트가 아닙니다.

<script rino-type="js" type="text/javascript">
  import os from "os";
  console.log(`<p>${os.type()}에서 빌드했습니다.</p>`);
</script>

<script rino-type="ts" type="text/typescript">
  const message: string = "TypeScript로 생성했습니다.";
  console.log(`<p>${message}</p>`);
</script>

지원 값은 js, javascript, ts, typescript입니다. Node.js 모듈을 가져올 수 있습니다. 빌드 데이터는 process.argv[1]에 JSON으로 전달되며, 콘텐츠 템플릿은 마지막 프로세스 인자로 콘텐츠 데이터도 받습니다.

인라인 에셋 내보내기

페이지나 컴포넌트가 소유한 작은 스타일과 브라우저 스크립트를 출력 파일로 모을 수 있습니다.

<style rino-export="/site.css">
  .callout { padding: 1rem; }
</style>

<script rino-export="/site.js">
  window.showMessage = () => alert("안녕하세요");
</script>

태그는 최종 HTML에서 제거되고 각각 dist/styles/site.css와 dist/scripts/site.js에 기록됩니다. .ts 경로나 rino-type="ts"를 사용하면 TypeScript를 JavaScript로 컴파일합니다. 여러 태그가 같은 파일을 대상으로 할 수 있고, 동일한 블록은 중복 기록되지 않습니다. 내보내기 경로에는 ..를 사용할 수 없습니다.

HTML 이벤트 처리기에서 호출할 함수는 window에 연결해야 합니다.