Markdown을 사용하여 단락에 클래스 이름을 정의 할 수 있습니까?

Markdown을 사용하여 단락에 클래스 이름을 정의 할 수 있습니까? 그렇다면 어떻게?

Dupe : Markdown에서 HTML 클래스 속성을 어떻게 설정합니까?

기본적으로? 아뇨하지만 ...

아니요, Markdown의 구문은 사용할 수 없습니다. Markdown Extra를 통해 ID 값 을 설정할 수 있습니다 .

원하는 경우 일반 HTML을 사용 하고 속성 markdown="1"을 추가 하여 HTML 요소 내에서 마크 다운 변환을 계속할 수 있습니다. 그래도 Markdown Extra 가 필요합니다 .

<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>

가능한 해결책 : (테스트되지 않았으며 대상 <blockquote>)

온라인에서 다음을 발견했습니다.

함수

function _DoBlockQuotes_callback($matches) {

    ...cut...

    //add id and class details...
    $id = $class = '';
    if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
        foreach ($matches[1] as $match) {
            if($match[0]=='#') $type = 'id';
            else $type = 'class';
            ${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
        }
        foreach ($matches[0] as $match) {
            $bq = str_replace($match,'',$bq);
        }
    }

    return _HashBlock(
        "<blockquote{$id}{$class}>\n$bq\n</blockquote>"
    ) . "\n\n";
}

가격 인하

>{.className}{#id}This is the blockquote

결과

<blockquote id="id" class="className">
    <p>This is the blockquote</p>
</blockquote>

원시 HTML은 실제로 마크 다운에서 완벽하게 유효합니다. 예를 들어 :

Normal *markdown* paragraph.

<p class="myclass">This paragraph has a class "myclass"</p>

HTML이 코드 블록 안에 있지 않은지 확인하십시오.

사용자 환경이 JavaScript 인 경우 markdown-it-attrs 플러그인과 함께 markdown-it 을 사용하십시오 .

const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);

const src = 'paragraph {.className #id and=attributes}';

// render
let res = md.render(src);
console.log(res);

산출

<p class="className" id="id" and="attributes">paragraph</p>

jsfiddle

참고 : 마크 다운에서 속성을 허용 할 때 보안 측면에주의하십시오!

면책 조항, 나는 markdown-it-attrs의 저자입니다.

마크 다운 에는이 기능이 있어야 하지만 그렇지 않습니다. 대신 언어 별 마크 다운 수퍼 셋이 붙어 있습니다.

PHP : Markdown Extra
Ruby : 크램 다운 , 마루 쿠

그러나 진정한 Markdown 구문을 준수해야하는 경우 원시 HTML을 삽입해야합니다. 이는 덜 이상적입니다.

markdown의 풍미가 kramdown 인 경우 다음과 같이 CSS 클래스를 설정할 수 있습니다.

{:.nameofclass}
paragraph is here

그런 다음 CSS 파일에서 CSS를 다음과 같이 설정하십시오.

.nameofclass{
   color: #000;
  }

다음은 @Yarin의 답변에 따른 kramdown의 실제 예입니다.

A simple paragraph with a class attribute.
{:.yourClass}

참조 : https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

위에서 언급했듯이 마크 다운 자체는 이것에 매달려 있습니다. 그러나 구현에 따라 몇 가지 해결 방법이 있습니다.

최소한 하나의 MD 버전은 <div>블록 수준 태그로 간주 되지만 <DIV>텍스트 일뿐입니다. 그러나 모든 Broswer는 대소 문자를 구분하지 않습니다. 이를 통해 div 컨테이너 태그를 추가하는 대신 MD의 구문 단순성을 유지할 수 있습니다.

따라서 다음은 해결 방법입니다.

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

이것의 단점은 출력 코드 <p>에 <div>줄을 감싸는 태그 가 있다는 것입니다 (둘 다 첫 번째는 일치하지 않기 때문에 두 번째는 일치하지 않기 때문에 두 번째입니다. 내가 찾은 브라우저에 대한 소란은 없지만 코드는 ' MD는 <p>어쨌든 여분의 태그 를 넣는 경향이 있습니다.

여러 버전의 마크 다운이 규칙 <tag markdown="1">을 구현하며이 경우 MD는 태그 내에서 정상적인 처리를 수행합니다. 위의 예는 다음과 같습니다.

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

Fletcher의 MultiMarkdown 의 현재 버전 에서는 참조 링크를 사용하는 경우 속성이 링크를 따라갈 수 있습니다.

에서 슬림 인하의 사용이 :

markdown:
  {:.cool-heading}
  #Some Title

번역 :

<h1 class="cool-heading">Some Title</h1>

또한 <span>태그 는 태그 내부를 허용합니다. 블록 수준 항목은 구성하지 않는 한 기본적으로 내부에서 MD를 무효화하지만 인라인 스타일은 기본적으로 MD를 허용합니다. 따라서 나는 종종 비슷한 일을한다.

This is a superfluous paragraph thing.

<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>

And thus with that I conclude.

이것이 보편적인지 100 % 확신하지는 않지만 내가 사용한 모든 MD 편집기에서 해당되는 것처럼 보입니다.

자바 스크립트 목적으로 선택기가 필요하다면 (나처럼), 또는 href대신에 속성 을 사용하고 싶을 수도 있습니다 .classid

그냥 이렇게 :

<a href="#foo">Link</a>

마크 다운은 href클래스 및 ID와 마찬가지로 속성을 무시하거나 제거 하지 않습니다.

따라서 Javascript 또는 jQuery에서 다음을 수행 할 수 있습니다.

$('a[href$="foo"]').click(function(event) {

    ... do your thing ...

    event.preventDefault();
});

적어도 이것은 내 버전의 Markdown에서 작동합니다 ...