Programming

Markdown Jekyll에서 이미지 캡션 사용

procodes 2020. 7. 29. 21:08

Markdown Jekyll에서 이미지 캡션 사용

Github에서 Jekyll 블로그를 호스팅하고 Markdown으로 게시물을 작성합니다. 이미지를 추가 할 때 다음과 같이합니다.

![name of the image](http://link.com/image.jpg)

그러면 텍스트에 이미지가 표시됩니다.

그러나 Markdown에게 이미지 아래 또는 위에 표시된 캡션을 추가하도록 지시하려면 어떻게해야합니까?

당신이 (당신이 직접 먼저 사이트를 생성하지 않고 GitHub의에 밀어 수있는 수단) 어떤 플러그인을 사용하지 않으려면, 당신은라는 이름의 새 파일을 만들 수 있습니다 image.html에를 _includes:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

그런 다음 마크 다운에서 이미지를 다음과 같이 표시하십시오.

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}

나는 이것이 오래된 질문이라는 것을 알고 있지만 이미지 캡션을 추가하는 방법을 여전히 공유한다고 생각했습니다. caption또는 figcaption태그 를 사용할 수는 없지만 플러그인을 사용하지 않고 간단한 대안이 될 수 있습니다.

마크 다운에서 강조 태그로 캡션을 감싸고 다음과 같이 새 줄을 삽입하지 않고 이미지 바로 아래에 배치 할 수 있습니다.

![](path_to_image)
*image_caption*

다음과 같은 HTML이 생성됩니다.

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

그런 다음 CSS em에서 페이지의 다른 태그를 방해하지 않고 다음 선택기를 사용하여 스타일을 지정할 수 있습니다 .

img + em { }

대신 이미지와 캡션 사이에 빈 줄이 없어야합니다.

<p>
    <img src="path_to_image" alt>
</p>
<p>
    <em>image_caption</em>
</p>

이외의 다른 태그를 사용할 수도 있습니다 em. 태그가 있는지 확인하십시오. 그렇지 않으면 스타일을 지정할 수 없습니다.

이를 위해 테이블을 사용할 수 있습니다. 잘 작동합니다.

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

결과:

캡션이 <figure>있는<figcaption> 이미지에 사용하는 올바른 HTML은 입니다 .

There's no Markdown equivalent for this, so if you're only adding the occasional caption, I'd encourage you to just add that html into your Markdown document:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

The Markdown spec encourages you to embed HTML in cases like this, so it will display just fine. It's also a lot simpler than messing with plugins.

If you're trying to use other Markdown-y features (like tables, asterisks, etc) to produce captions, then you're just hacking around how Markdown was intended to be used.

You can try to use pandoc as your converter. Here's a jekyll plugin to implement this. Pandoc will be able to add a figure caption the same as your alt attribute automatically.

But you have to push the compiled site because github doesn't allow plugins in Github pages for security.

A slight riff on the top voted answer that I found to be a little more explicit is to use the jekyll syntax for adding a class to something and then style it that way.

So in the post you would have:

![My image](/images/my-image.png)

{:.image-caption}
*The caption for my image*

And then in your CSS file you can do something like this:

.image-caption {
  text-align: center;
  font-size: .8rem;
  color: light-grey;

Comes out looking good!

There are two semantically correct solutions to this question:

Using a plugin
Creating a custom include

1. Using a plugin

I've tried a couple of plugins doing this and my favourite is jekyll-figure.

1.1. Install `jekyll-figure`

One way to install jekyll-figure is to add gem "jekyll-figure" to your Gemfile in your plugins group.

Then run bundle install from your terminal window.

1.2. Use `jekyll-figure`

Simply wrap your markdown in {% figure %} and {% endfigure %} tags.

You caption goes in the opening {% figure %} tag, and you can even style it with markdown!

Example:

{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
    ![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
{% endfigure %}

1.3. Style it

Now that your images and captions are semantically correct, you can apply CSS as you wish to:

figure (for both image and caption)
figure img (for image only)
figcaption (for caption only)

2. Creating a custom include

You'll need to create an image.html file in your _includes folder, and include it using Liquid in Markdown.

2.1. Create _includes/image.html

Create the image.html document in your _includes folder :

<!-- _includes/image.html -->
<figure>
    {% if include.url %}
    <a href="{{ include.url }}">
    {% endif %}
    <img
        {% if include.srcabs %}
            src="{{ include.srcabs }}"
        {% else %}
            src="{{ site.baseurl }}/assets/images/{{ include.src }}"
        {% endif %}
    alt="{{ include.alt }}">
    {% if include.url %}
    </a>
    {% endif %}
    {% if include.caption %}
        <figcaption>{{ include.caption }}</figcaption>
    {% endif %}
</figure>

2.2. In Markdown, include an image using Liquid

An image in /assets/images with a caption:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

An (external) image using an absolute URL: (change src="" to srcabs="")

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

A clickable image: (add url="" argument)

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    url="https://jekyllrb.com" <!-- destination url -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

An image without a caption:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
%}

2.3. Style it

Now that your images and captions are semantically correct, you can apply CSS as you wish to:

figure (for both image and caption)
figure img (for image only)
figcaption (for caption only)

Andrew의 @ andrew-wei 답변이 훌륭합니다. 수행하려는 작업에 따라 몇 개를 함께 연결할 수도 있습니다. 예를 들어, 자막의 다른 부분에 줄 바꿈과 굵은 체 및 기울임 꼴이있는 대체, 제목 및 캡션이있는 이미지를 얻을 수 있습니다.

img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}

다음 <img>마크 다운으로

![description](https://img.jpg "description")
***Image:*** *description*

가장 간단한 방법은 아니지만 가장 간단한 방법은 다음과 같습니다. 크기 조정 문제가 분명히 있기 때문에 이미지 크기를 쉽게 수정할 수 있도록 HTML로 예제를 제공하는 것입니다. 이것은 나를 위해 일했습니다.

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |

참고 URL : https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll

'Programming' 카테고리의 다른 글

PHP에서 유닉스 타임 스탬프에 24 시간을 어떻게 추가합니까? (0)	2020.07.29
이 달의 이름 (이름으로 날짜-오늘. 달) (0)	2020.07.29
중복 임의의 값을 얻는 것을 피하기 위해 임의의 클래스를 시드하는 방법 (0)	2020.07.29
숫자를 월 이름으로 변환하는 스위치 케이스 블록을 줄이는 방법은 무엇입니까? (0)	2020.07.29
adb 명령을 찾을 수 없습니다 (0)	2020.07.29

현재글Markdown Jekyll에서 이미지 캡션 사용

procodes

Markdown Jekyll에서 이미지 캡션 사용

Markdown Jekyll에서 이미지 캡션 사용

1. Using a plugin

1.1. Install `jekyll-figure`

1.2. Use `jekyll-figure`

1.3. Style it

2. Creating a custom include

2.1. Create _includes/image.html

2.2. In Markdown, include an image using Liquid

2.3. Style it

'Programming' 카테고리의 다른 글

'Programming'의 다른글

티스토리툴바

Markdown Jekyll에서 이미지 캡션 사용

Markdown Jekyll에서 이미지 캡션 사용

1. Using a plugin

1.1. Install jekyll-figure

1.2. Use jekyll-figure

1.3. Style it

2. Creating a custom include

2.1. Create _includes/image.html

2.2. In Markdown, include an image using Liquid

2.3. Style it

'Programming' 카테고리의 다른 글

'Programming'의 다른글

관련글

티스토리툴바

1.1. Install `jekyll-figure`

1.2. Use `jekyll-figure`