md2googleslides
0.5
마크다운 및 HTML에서 Google 슬라이드를 생성합니다. 명령줄에서 실행하거나 다른 애플리케이션에 포함하세요.
이 프로젝트는 Slides API를 사용하는 방법의 예로 개발되었습니다.
아직 놀랍도록 아름다운 데크가 생성되지는 않지만 프레젠테이션의 프로토타입을 신속하게 제작하려면 이 도구를 사용하는 것이 좋습니다.
기여를 환영합니다.
명령줄을 사용하려면 md2gslides를 전역적으로 설치하세요.
npm install -g md2gslides그런 다음 OAuth 클라이언트 ID 자격 증명을 가져옵니다.
client_id.json (이름이 일치해야 함)에 복사하고 ~/.md2googleslides 에 저장합니다.설치 후 다음을 실행하여 슬라이드를 가져옵니다.
md2gslides slides.md --title " Talk Title " 그러면 계정에 Talk Title 이라는 제목의 새 Google 프레젠테이션이 생성됩니다.
참고: 명령을 처음 실행하면 인증을 묻는 메시지가 표시됩니다. OAuth 토큰 자격 증명은 ~/.md2googleslides/credentials.json 이라는 파일에 로컬로 저장됩니다.
위의 설명을 실행할 때마다 새로운 슬라이드 데크가 생성됩니다. 정확히 동일한 데크에서 작업하려면 이미 생성된 슬라이드의 ID를 가져오면 됩니다. 예를 들어 다음 명령을 사용할 수 있습니다.
# To reuse deck available at: https://docs.google.com/presentation/d/<some id>/edit#
md2gslides slides.md --title "Talk Title" --append <some id> --erase
md2gslides는 마크다운을 위해 CommonMark 및 Github Flavored Markdown 규칙의 하위 집합을 사용합니다.
각 슬라이드는 일반적으로 헤더와 0개 이상의 블록 요소로 표시됩니다.
수평선( --- )을 사용하여 새 슬라이드를 시작합니다. 첫 번째 슬라이드에서는 구분 기호가 생략될 수 있습니다.
다음 예에서는 다양한 레이아웃의 슬라이드를 만드는 방법을 보여줍니다.
---
# 제목 슬라이드입니다
## 여기에 당신의 이름이 있습니다
---
# 섹션 제목입니다
---
# 섹션 제목 및 본문 슬라이드
## 자막입니다
이것이 바로 몸이다
---
# 제목 및 본문 슬라이드
슬라이드 본체입니다.
제목에 {.big} 을 추가하면 하나의 큰 포인트가 있는 슬라이드가 만들어집니다.
---
# 이것이 요점입니다 {.big}
본문과 함께 헤더에도 {.big} 사용하세요.
---
# 100% {.big}
이것이 바로 몸이다
{.column} 으로 열을 구분하세요. 마커는 앞과 뒤 모두 공백으로 된 자체 라인에 나타나야 합니다.
---
# 2열 레이아웃
왼쪽 열입니다
{.열}
오른쪽 열입니다
md2googleslides 테마 관련 옵션을 편집하거나 제어하지 않습니다. Google Slides에서 원하는 기본 테마를 직접 설정하세요. 덱 재사용을 위해 --append 옵션을 사용해도 테마는 변경되지 않습니다.
이미지 태그를 사용하여 이미지를 슬라이드에 배치할 수 있습니다. 여러 이미지가 포함될 수 있습니다. 단일 단락의 여러 이미지는 열로 배열되고, 여러 단락은 행으로 배열됩니다.
참고: 이미지는 현재 슬라이드 템플릿에 맞게 크기가 조정되고 중앙에 배치됩니다.
---
# 슬라이드에는 이미지가 있을 수 있습니다.
이미지 URL 끝에 {.background} 추가하여 슬라이드의 배경 이미지를 설정합니다.
---
# 슬라이드에는 배경 이미지가 있을 수 있습니다.
{.배경}
수정된 이미지 태그가 포함된 YouTube 동영상을 포함합니다.
---
# 슬라이드에는 비디오가 포함될 수 있습니다
@[유튜브](MG8KADiRbOU)
HTML 주석을 사용하여 슬라이드에 발표자 노트를 포함합니다. 댓글 안의 텍스트에는 서식 지정을 위한 마크다운이 포함될 수 있지만 텍스트 서식만 허용됩니다. 발표자 노트 내에서 비디오, 이미지, 표는 무시됩니다.
---
# 슬라이드 제목
{.배경}
<!--
발표자 노트입니다.
-->
다음을 포함한 기본 형식 지정 규칙이 허용됩니다.
다음 마크다운은 몇 가지 일반적인 스타일을 보여줍니다.
**굵게**, *이탤릭체* 및 ~~취소선~~을 사용할 수 있습니다. 순서가 지정된 목록: 1. 항목 1 1. 항목 2 1. 항목 2.1 순서가 지정되지 않은 목록: * 항목 1 * 항목 2 * 항목 2.1
또한 스타일 지정을 위해 인라인 HTML 태그의 하위 집합이 지원됩니다.
<span><sup><sub><em><i><strong><b> <span> 요소와 함께 사용하기 위해 지원되는 CSS 스타일:
colorbackground-colorfont-weight: boldfont-style: italictext-decoration: underlinetext-decoration: line-throughfont-familyfont-variant: small-capsfont-size (단위에 포인트를 사용해야 함) 스타일을 적용하기 위해 마크다운 요소 뒤에 {style="..."} 속성을 사용할 수도 있습니다. 헤더, 인라인 요소, 코드 블록 등에 사용할 수 있습니다.
:emoji: 를 사용하여 텍스트에 Github 스타일 이모티콘을 사용하세요.
다음 예에서는 슬라이드의 머리글과 본문에 이모티콘을 삽입합니다.
### 나 :heart: 고양이 :heart_eyes_cat:
들여쓰기된 코드 블록과 분리된 코드 블록이 모두 지원되며 구문 강조가 표시됩니다.
다음 예제에서는 강조 표시된 코드를 렌더링합니다.
### 안녕하세요 세계
``자바스크립트
console.log('안녕하세요');
````
구문 강조 테마를 변경하려면 명령줄에서 --style <theme> 옵션을 지정합니다. 모든highlight.js 테마가 지원됩니다. 예를 들어, github 테마를 사용하려면
md2gslides slides.md --style github글꼴 크기 변경과 같은 추가 스타일 변경 사항을 전체 블록에 적용할 수도 있습니다.
### 안녕하세요 세계
``자바스크립트
console.log('안녕하세요');
``{style="글꼴 크기: 36pt"}
테이블은 GFM 구문을 통해 지원됩니다.
참고: 동일한 슬라이드에 표와 기타 블록 요소를 포함하면 요소가 겹치면서 결과가 좋지 않을 수 있습니다. 슬라이드를 생성한 후 레이아웃을 피하거나 수동으로 조정하십시오.
다음은 슬라이드에 2x5 테이블을 생성합니다.
### 미국 최고의 애완동물 동물 | 숫자 -----|---------- 물고기 | 1억 4200만 고양이 | 8,800만 개 | 7,500만 새 | 1,600만
로컬 경로를 참조하는 이미지가 일시적으로 file.io에 업로드되고 호스팅됩니다. File.io는 업로드 파일에 대한 단기 임의 URL을 생성하고 사용 후 즉시 콘텐츠를 삭제하는 임시 파일 제공 서비스입니다.
로컬 이미지는 제3자에게 업로드되므로 이 기능을 사용하려면 명시적인 선택이 필요합니다. 이미지 업로드를 선택하려면 --use-fileio 옵션을 포함하세요. 이는 파일 기반 이미지뿐만 아니라 수학 표현식 및 SVG와 같은 자동 래스터화된 콘텐츠에도 적용됩니다.
슬라이드에는 데이터에 대해 $$$ 울타리 블록을 사용하여 생성된 이미지가 포함될 수도 있습니다. 현재 지원되는 생성 이미지는 수학 표현식(TeX 및 MathML)과 SVG입니다. 래스터화된 이미지는 로컬 이미지처럼 처리되며 --use-fileio 옵션을 통해 제3자 서비스에 이미지를 업로드하도록 선택해야 합니다.
TeX 사용:
# 수학은 어때요? $$$ 수학 cos (2theta) = cos^2 theta - sin^2 theta $$$
SVG
# 아니면 일부 SVG?
$$$ svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 48 48">
<def>
<path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/>
</defs>
<clipPath id="b">
<use xlink:href="#a" Overflow="visible"/>
</clipPath>
<path 클립 경로="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/>
<path 클립 경로="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/>
<경로 클립 경로="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/>
</svg>
$$$
로컬 이미지와 마찬가지로 생성된 이미지는 file.io를 통해 일시적으로 제공됩니다.
다른 이미지 생성기(예: mermaid, Chartjs 등)에 대한 풀 요청을 환영합니다!
파일 이름 인수를 생략하여 마크다운을 도구에 파이프할 수도 있습니다.
/bin/md2gslides.js 를 제외하고 TypeScript는 전체적으로 사용되며 Babel로 컴파일됩니다. 테스트에는 Mocha와 Chai가 사용됩니다.
무엇보다 먼저 모든 종속성이 있는지 확인하세요.
npm install컴파일하려면:
npm run compile단위 테스트를 실행하려면 다음 안내를 따르세요.
npm run test린트/형식 테스트:
npm run lint추가 용어는 CONTRIBUTING을 참조하세요.
이 라이브러리는 Apache 2.0에 따라 라이센스가 부여됩니다. 전체 라이센스 텍스트는 LICENSE에서 볼 수 있습니다.
