Как визуализировать сноски с отсутствующими определениями, используя реакции-уценку и примечание-gfm
Я создаю приложение реагирования, которое использует React-Markdown для отображения произвольной уценки, и я хотел бы поддерживать GFM через примечание-gfm или какой-либо другой метод. Вот мой компонент:
import { FC } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
interface Props {
content: string;
}
const MessageContent: FC<Props> = ({ content }) => {
return (
<ReactMarkdown children = {content} remarkPlugins = {[remarkGfm]} />
);
}
export default MessageContent;
Вышеупомянутое работает, но я заметил, что если уценка содержит сноску, а определение сноски отсутствует, она будет проигнорирована remark-gfm. Например, если моя уценка выглядит так:
## Footnote
A note[^1]
A second note [^2]
[^1]: Big note.
Сноска номер 1 будет обработана, как и ожидалось, с помощью remark-gfm, но сноска номер 2 будет проигнорирована и не преобразована в надстрочный индекс.
Есть ли способ в этом случае заставить сноску номер 2 хотя бы отображаться как надстрочный индекс?
Ответы 1
Используйте необработанный HTML-тег <sup>.
Not a footnote.<sup>2</sup>
Обратите внимание, что сноски не являются частью спецификации CommonMark или расширенной спецификации GitHub . Не были даже поддержаны оригинальные реализации Джона Грубера (несмотря на то, что он регулярно использует их на своем сайте). Поэтому ожидаемое поведение сносок не полностью определено. Однако поведение, которое вы получаете, является ожидаемым поведением в любой реализации, которую я когда-либо видел, которая включает поддержку. В частности, маркер сноски распознается как таковой только в том случае, если существует соответствующее определение сноски.
Такое поведение согласуется с другим синтаксисом ссылочного стиля, который более подробно определен. Например, ссылочные ссылки включают требование, чтобы метка ссылки «соответствовала определению ссылки на ссылку в другом месте документа». Следует признать, что в спецификации конкретно не говорится, что должно произойти, если совпадения нет, но быстрый тест показывает, что ссылка не анализируется как ссылка эталонной реализацией Commonmark.
[foo][bar]
[foo][baz]
[bar]: /url "title"
отображается как
<p><a href = "/url" title = "title">foo</a>
[foo][baz]</p>
Следовательно, в вашем случае из-за отсутствия соответствующего определения [^2] не является маркером сноски и не обрабатывается как таковой. В первоначальных правилах Markdown говорится:
Для любой разметки, не охваченной синтаксисом Markdown, вы просто используете сам HTML.
Конечно, если вы хотите создать собственное расширение, которое анализирует несовпадающие маркеры как верхние индексы, вы можете это сделать. Однако здесь это выходит за рамки.
Потрясающий ответ, спасибо. В конечном итоге я перешел на использование rehype-raw и rehype-sanitize для поддержки HTML в уценке.