commonmark image media queries 다운로드 - commonmark image media queries 소스 코드 다운로드

commonmark image media queries

기타 카테고리

Version 1.0.1

다운로드

CommonMark 이미지 미디어 쿼리

이 CommonMark Extension을 사용하면 CommonMark 렌더링 된 Markdown의 이미지에 미디어 쿼리를 추가 할 수 있습니다.

설치

작곡가를 통해이 확장을 설치할 수 있습니다.

composer require sven/commonmark-image-media-queries

용법

이 확장을 가능하게하려면 먼저 CommonMark와 함께 제공되는 Attributes 확장이 활성화되어 있는지 확인하십시오. 그런 다음 CommonMark 환경에 추가하십시오.

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

$ environment -> addExtension ( new ImageMediaQueriesExtension ());

이제 이미지에 media 속성을 추가 할 수 있습니다.

 ![ from 800px wide ] ( /assets/800.jpg ) {media="(min-width: 800px)"}
![ from 1200px wide ] ( /assets/1200.jpg ) {media="(min-width: 1200px)"}
![ An image ] ( /assets/default.jpg )

이것은 다음 HTML을 렌더링합니다.

 < picture class =" media-query-picture " >
    < source srcset =" /assets/800.jpg " media =" (min-width: 800px) " />
    < source srcset =" /assets/1200.jpg " media =" (min-width: 1200px) " />
    < img src =" /assets/default.jpg " alt =" An image " />
</ picture >

중요한

media 속성이있는 다른 하나 이상의 이미지 직후에 마지막 이미지는 항상 "기본값"으로 사용되므로 <picture> 요소의 <img /> 태그로 렌더링됩니다. 이 마지막 이미지에 media 속성 자체가 있으면 해당 속성이 사용되지 않고 제거됩니다.

속기

이 연장은 또한 자주 사용하는 미디어 쿼리에 대한 자신의 속기를 쓸 수 있습니다. CommonMark에 확장자를 등록하는 동안 속기를 활성화 할 수 있습니다.

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;
use Sven  CommonMark  ImageMediaQueries  Shorthands  ColorScheme ;

$ extension = new ImageMediaQueriesExtension ();
$ extension -> addShorthand ( new ColorScheme ());

$ environment -> addExtension ( $ extension );

색 구성표

SvenCommonMarkImageMediaQueriesShorthandsColorScheme Shorthand를 사용하면 이미지에서 {scheme=dark} 사용할 수 있으며 (prefers-color-scheme: dark) 로 확장 할 수 있습니다.

 ![ dark ] ( /assets/dark-settings.jpg ) {scheme=dark}
![ A settings dialog ] ( /assets/settings.jpg )

이것은 다음 HTML을 렌더링합니다.

 < picture class =" media-query-picture " >
    < source srcset =" /assets/dark-settings.jpg " media =" (prefers-color-scheme: dark) " />
    < img src =" /assets/settings.jpg " alt =" An image " />
</ picture >

너비

SvenCommonMarkImageMediaQueriesShorthandsWidth ghorthand는 이미지에 추가 할 minw 및 maxw 속성을 제공합니다. 그런 다음 위의 예는 다음과 같이 단축 될 수 있습니다.

 ![ from 800px wide ] ( /assets/800.jpg ) {minw=800px}
![ from 1200px wide ] ( /assets/1200.jpg ) {minw=1200px}
![ An image ] ( /assets/default.jpg )

물론 이것은 {maxw=[value]} 와 동일하게 작동합니다.

나만의 글을 쓰고 있습니다

자신의 속기를 작성하려면 SvenCommonMarkImageMediaQueriesShorthandsShorthand 인터페이스를 구현하고 mediaQueries 메소드의 속기에 의해 키어진 쿼리 배열을 반환하십시오. 쿼리에서 {} 의 모든 인스턴스는 HTML 속성의 값으로 대체됩니다.

 use Sven  CommonMark  ImageMediaQueries  Shorthands  Shorthand ;

final class AspectRatio implements Shorthand
{
    public function mediaQueries (): iterable
    {
        return [
            ' min-aspect ' => ' (min-aspect-ratio: {}) ' ,
            ' max-aspect ' => ' (max-aspect-ratio: {}) ' ,
        ];
    }
}

그런 다음 확장자에 속기를 추가하면 Markdown의 이미지에서 {min-aspect=8/5} 및 {max-aspect=3/2} 와 같은 속성을 사용할 수 있습니다.

메모

CommonMark 구성 객체에 액세스하려면 일반 Shorthand 인터페이스 대신 SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand 인터페이스를 구현할 수 있습니다.

구성

기본적으로,이 확장은 media-query-picture 클래스를 <picture> 요소에 추가합니다. 구성 에서이 클래스를 변경할 수 있습니다.

 use League  CommonMark  Environment  Environment ;
use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

$ environment = new Environment ([
    ' image_media_queries ' => [
        ' picture_class ' => ' your-class ' , // Default: 'media-query-picture'.
    ],
]);

$ environment -> addExtension ( new ImageMediaQueriesExtension ());