[GiithubActions+Marp] mardown 기법을 통해 좋아하는 형식으로 프레젠테이션 자료를 제작하고 공개할 수 있습니다.

개시하다

여러분 Marp 아세요?
Marp은 markedown 기재법으로 발표자료를 간단하게 제작할 수 있는 도구다.
이번에는 Marp과 GithubAction을 활용해 마크다운을 빠르게 쓰고 GiitHub에 슬라이드를 공개하는 방법을 소개한다.
Marp에 대한 자세한 사용 방법은 여기를 참조하십시오.https://marp.app/

생성 프로세스

엔지니어라면 발표회와 LT회에서 슬라이드 자료를 만들어 발표할 기회가 많을 것이다.
나 혼자 발표할 기회도 늘었어.
평소에 슬라이드 자료를 만들 때 PowerPoint를 사용합니다.
LT 발표 등 가벼운 슬라이드를 만들고 싶을 때.

"슬라이드를 좀 더 편하게 (자주 쓰는 마크다운 기록법으로) 만들고 싶어요."

"작성한 슬라이드를 GiitHub에 공개하고 관리하고 싶습니다."

이렇게 생각하면서 이번 환경을 만들었어요!

당신은 무엇을 할 수 있습니까?

"이 환경을 만들어서 뭘 할 수 있을까요?"다들 그렇게 생각하실 거라고 생각해요.
이 환경을 만들면 다음과 같은 일을 할 수 있다.

마크다운으로 슬라이드 제작 가능!

github를 통해 슬라이딩(markdown)을 관리할 수 있습니다!

슬라이드를 좋아하는 출력 형식(pdf,), pptx)으로 공개할 수 있다.

(참가자가 슬라이드에 발표) 간단하게 다운로드 가능

개요

제작 환경은 다음과 같습니다.

보통 로컬에서markdown을 편집합니다.
markdown을 편집한 후 제작된 markdown 파일을 GitHub에 push합니다.
GiitHubActions가artfacts 슬라이드의 pdf에 비해 검출되었습니다.)
잠깐만요.

환경을 만들다

위와 같은 환경을 실제로 만들어보자.
단계는 다음과 같습니다.

서류를 준비하다

파일 내용 설명

그럼 가보자.

1. 필요한 서류 준비

다음 파일을 준비합니다.

(好きなディレクトリ)/
　├ .github/workflows/
            ├ slide.yml 
　├ config.json

다음 명령을 사용하여 파일을 만들 수 있습니다.

$ mkdir -p .github/workflows/
$ touch .github/workflows/slide.yml config.json 

2. 파일 내용 설명

작성한 문서는 다음과 같이 기술하십시오.
Giithub Action의 슬라이드입니다.콘텐츠를 보려면 여기를 클릭하십시오.
slide.yml

name: marp-GitHub-actions
on: [push]
jobs:
  marp-to-pdf:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: sudo apt-get update & sudo apt-get install jq
      - run: |
          directory=$(cat config.json | jq -r .directory)
          output_format=$(cat config.json | jq -r .output_format)
          echo "::set-output name=DIR::${directory}"
          echo "::set-output name=FORMAT::${output_format}"
        id: config
      - run: docker run --rm -u root --init -v "$(pwd):/home/marp/app/" 
              -e LANG=$LANG marpteam/marp-cli ${{steps.config.outputs.DIR}}/slide.md 
              --${{steps.config.outputs.FORMAT}} 
              -o ${{steps.config.outputs.DIR}}.${{steps.config.outputs.FORMAT}}
      - uses: actions/upload-artifact@v2
        with:
          name: output_slide
          path: ${{steps.config.outputs.DIR}}.${{steps.config.outputs.FORMAT}}

config.json(설정 파일)의 내용을 여기

{
    "directory": "__ディレクトリ名__",
    "output_format": "__html,pdf,pptxを記述する__"
}

를 클릭하세요.
환경 자체가 이곳에서 완성되었다.
그렇다면 실제 이쪽 환경을 이용해 시위 행진을 살펴보자.

Demo

:::messages:warning
디렉토리의 슬라이드입니다.md 파일을 만드는 것을 전제로 설명합니다.
:::
:::messages:warning
Vscode를 편집기로 설치합니다.
:::

사전 준비

사전 준비로 vscode에 다음 확장 기능을 설치하십시오.
여기에 있는 확장 기능을 설치하면 Marp의 미리 보기를 확인할 수 있습니다.
Marp for VS Code - Visual Studio Marketplace

슬라이드 제작 - 슬라이드 공개

미리 준비해 놓았어도
어서 슬라이드를 만들어라.
공개까지 3단계만 거치면 된다.

슬라이드 만들기

구성 파일 수정

Giithub에 대한 Push 수행

1. mardown 파일 만들기

우선 슬라이드.md의 내용에 다음과 같은 내용을 기술해 주십시오.
slide.md 내용 여기를 클릭하세요
slide.md

---
marp: true
page_number: true
theme: gaia
paginate: true
class: lead
header: header
footer: footter
---
<!-- headingDivider: 1 -->

<!-- #　見出しの前にスライドページを自動的に分割 -->
# test1
- test
- test

# test2
- test
- test

아래와 같이 보일 것 같습니다.

2. 프로파일 수정

위 config다음은 json 파일을 수정합니다.
이번에는 슬라이드의 출력 형식을 pdf로 설정합니다.
config.파일 내용을 보려면 여기를 클릭하십시오
이번에test 디렉터리에markdown 파일을 만들었기 때문에 다음과 같이 기술합니다.
config.json

{
    "directory": "test",
    "output_format": "pdf"
}

3. 제작된 파일들을 GiitHub에 push

이 파일을 GiitHub에 push하세요.

$ git add test/slide.md .GitHub/workflows/slide.yml config.json
$ git commit -m "必要なファイルを追加"
$ git push origin HEAD

4. 나머지는 슬라이드가 완성될 때까지 기다린다!!

GiitHub push를 받으면 GiitHubaction에서 검사를 하고 처리도 합니다.

처리가 끝난 후artfacts에서 슬라이드를 완성합니다.

output_파일을 클릭해 보세요.
zip 형식으로 설치할 수 있습니다.
펼치면 test.pdf 완성.

시위 행진은 여기서 마치겠습니다!

최후

이번에는markedown에서 슬라이드를 만들고github 동작으로 공개하는 방법을 소개했다.
만약 모르는 부분이 있으면 마음대로 메시지를 남겨 주세요.

보태다

일본어 글씨체가 좀 이상해서 그림을 읽을 수 없는 문제가 있습니다.
아래처럼 수정할 수 있다면 대응할 수 있을 것 같습니다.
Giithub Action의 슬라이드입니다.콘텐츠를 보려면 여기를 클릭하십시오.--allow-local-files 옵션이 추가되었습니다.
slide.yml

name: marp-github-actions
on: [push]
jobs:
  marp-to-pdf:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: sudo apt-get update & sudo apt-get install jq
      - run: |
          directory=$(cat config.json | jq -r .directory)
          output_format=$(cat config.json | jq -r .output_format)
          echo "::set-output name=DIR::${directory}"
          echo "::set-output name=FORMAT::${output_format}"
        id: config
      - run: docker run --rm -u root --init -v "$(pwd):/home/marp/app/" 
              -e LANG="ja_JP.UTF-8" marpteam/marp-cli ${{steps.config.outputs.DIR}}/slide.md 
              --${{steps.config.outputs.FORMAT}} 
              -o ${{steps.config.outputs.DIR}}.${{steps.config.outputs.FORMAT}}
              --allow-local-files
      - uses: actions/upload-artifact@v2
        with:
          name: output_slide
          path: ${{steps.config.outputs.DIR}}.${{steps.config.outputs.FORMAT}}

슬라이드를 수정하는 mardown 파일은 다음과 같습니다.
슬라이드의 mardown 파일을 누르십시오
slide.md

---
marp: true
page_number: true
theme: gaia
paginate: true
class: lead
header: header
footer: footter
---
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');

section {
    font-family: 'Noto Serif', serif;
}
</style>

<!-- headingDivider: 1 -->

<!-- #　見出しの前にスライドページを自動的に分割 -->

# test1
- test
- test

# test2
- test
- test