引用符と著者の取り扱い

5962 ワード

css quote author markdown テキストリンク

このアプローチは、カスタムCSS/SSS/SASSをあなたのウェブサイトに加える能力に依存します.
解決策:最後の段落を取り、CSSは、著者としてそれを扱うことができます.例:

> Quote
>
> Author

以下のようにレンダリングされます:

<blockquote>
  <p>Quote</p>
  <p>Author</p>
</blockquote>

このアプローチは3つの状況を扱うことができます.

著者なし引用.私の意見では、引用が唯一の引用符は、ソースがある場合でも、不明です.

> Quote

レンダリング:

<blockquote>
  <p>Quote</p>
</blockquote>

著者と引用

> Quote
>
> Author

レンダリング:

<blockquote>
  <p>Quote</p>
  <p>Author</p>
</blockquote>

著者との複数引用

> Quote 1
>
> Quote 2
>
> Author

レンダリング:

<blockquote>
  <p>Quote 1</p>
  <p>Quote 2</p>
  <p>Author</p>
</blockquote>

欠点は、著者なしで複数の引用符を扱うことができないことです.しかし、私のためにそれは罰金です.
SSSソリューション

blockquote {
  // Reset
  quotes: none;

  &::before,
  &::after {
    content: '';
    content: none;
  }

  font-style: italic;
  position: relative;
  border-left: 5px solid #57C4E5;
  padding: 0 1rem;

  p {
    // Start double quotes
    &:first-of-type {
      &::before {
        content: '\201C';
        position: absolute;
        left: 0;
        top: 0;
        margin-left: 0.5rem;
      }
    }

    // End double quotes
    &:nth-last-child(2), // Add to quote/quotes with author.
    &:only-child { // Add to a single quote without an author.
      &::after {
        content: '\201D';
        margin-left: 1px;
      }
    }

    // Author styling
    &:last-of-type:not(:only-child) {      
      &::before {
        content: '\2014''\0020'; // Add 'Em Dash' + 'space' before the author
      }
    }
  }
}

Reference

この問題について(引用符と著者の取り扱い), 我々は、より多くの情報をここで見つけました https://dev.to/bkddev/handling-quote-and-author-in-markdown-with-css-192h

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

AppWidgetアプリケーション(三)---PendingIntentのgetBroadcast

[プログラマー][java]完走できなかった選手