본문 및 댓글에 Playground 삽입하는 방법

공지
1

안녕하세요. 슬로그램 지기 플러츠렛입니다.

여기서는 본문과 댓글에 Playground를 삽입하는 방법을 설명합니다.

시작

Playground는 작성한 코드를 웹 상에서 바로 실행해볼 수 있는 유용한 도구입니다.

슬래그램에서는 Playground를 크게 두가지 방법으로 삽입할 수 있는데, htrml의 <iframe> 태그로 삽입하는 방법과 codebytes 플러그인을 이용하는 방법입니다.

<iframe> 태그로 삽입하는 방법

먼저 <iframe> 태그로 삽입하는 방법을 소개하겠습니다.
외부 사이트를 이용하는 방식이다 보니 각 사이트마다 <iframe> 형식으로 만드는 방법이 조금씩 상이합니다.

  1. 아래의 목록에서 원하는 언어의 Playground 사이트에 접속합니다.
  2. 해당 사이트에서 소스코드를 작성 후 코드가 실행되는지 확인합니다.
    • 이미 작성된 코드가 있다면 공유하고 싶은 코드를 복사/붙여넣기
  3. 각 사이트 별로 <iframe> 태그를 구성합니다.
    • <ifreme> 형식으로 자동으로 구성해주는 사이트의 경우, 복사/붙여넣기만으로 간단하게 삽입할 수 있습니다.
      • .NET Fiddle: 상단 중앙 Share 버튼 클릭 시 자동으로 구성됨
      • zapp.run: 우측 상단 Embed 버튼 클릭 시 자동으로 구성됨, height 부분은 조절 필요
      • play.kotlinglang: 우측 상단 Share code 버튼 클릭 시 자동으로 구성됨. width, height 부분은 조절 필요
      • swiftfiddle: 상단 중앙 Share 버튼 클릭시 자동으로 구성됨
    • Url 형태로 공유되는 사이트의 경우, 아래의 형식을 참고하여 구성할 수 있습니다.
      <iframe width="100%" height="300"
  src="url">
</iframe>
      • SharpLab: 브라우저에서 사이트 링크 전체를 복사하여 src 부분에 url 대체하여 구성
      • codapi: 코드 편집기 하단의 Share 버튼 클릭하면 URL이 복사되고, src 부분에 url 대체하여 구성

Playground 삽입하면 실제 글에서 어떻게 보이는지 SharpLab를 예시로 보여드리겠습니다.

codebytes 플러그인으로 삽입하는 방법

다음으로 codebytes 플러그인을 이용하는 방법을 소개하겠습니다.
codebytes 플러그인의 경우, 글 작성 중에 바로 사용할 수 있는 방법이면서, 코드를 쉽게 수정할 수 있는 방법입니다.

  1. 글을 작성할 때 상단 버튼 메뉴에서 가장 끝에 있는 버튼을 클릭을 클릭합니다.

    image

    • 작성 중인 글에 아래와 같이 입력됐는지 확인합니다.
    [codebyte]

[/codebyte]

  2. 우측 미리보기 영역에서 언어를 선택합니다.

    image
    image715×415 11.2 KB

    • 입력된 부분이 아래와 같이 변경됩니다. (C# 기준)
    [codebyte language=csharp]
namespace HelloWorld {
  class Hello {
    static void Main(string[] args) {
      System.Console.WriteLine("Hello world!");
    }
  }
}
[/codebyte]

  3. 소스코드를 작성 후 코드가 실행되는지 확인합니다.

    • 이미 작성된 코드가 있다면 공유하고 싶은 코드를 복사 및 붙여넣기

마찬가지로 codebytes 플러그인을 이용해 삽입할 경우 어떻게 보이는지 보여드리겠습니다.

namespace HelloWorld { class Hello { static void Main(string[] args) { System.Console.WriteLine("Hello world!"); } } }

마무리

여기까지 슬로그램에서 Playground를 삽입하는 방법을 알아보았습니다.
이처럼 Playground를 이용하게 되면 작성 중인 글에 바로 실행되는 코드를 쉽게 삽입하여 공유할 수 있습니다.
공유하고 싶은 코드가 있다면 Playground를 활용해보세요!

1개의 좋아요