Обработка якорей в постах, созданных с помощью Markdown

Поддержка
1

Всем привет! Я использую сайт на Discourse для публикации спецификаций, которые в основном написаны на Markdown, но столкнулся с проблемой: якоря, используемые для заголовков, отображаются, хотя должны быть скрыты.

Подскажите, пожалуйста, есть ли способ их скрыть?

image
image1333×533 27.8 KB

2

Привет, добро пожаловать!

Этот синтаксис из kramdown или PHP Markdown Extra?

Discourse использует MarkdownIt, который основан на спецификации CommonMark. Он не поддерживает указание идентификатора заголовка.

Кажется, что этот вопрос обсуждался ранее: Anchors in markdown - Spec - CommonMark Discussion, но я не вижу какого-либо окончательного вывода.

Однако Discourse автоматически генерирует якоря.
Вы можете увидеть это здесь:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse-markdown-it/src/features/anchor.js

В целом, вы можете ожидать следующие идентификаторы:

  • h-{headingId} (без ID поста, без слага)
  • h-{slug}-{headingId} (без ID поста)
  • p-{postId}-h-{headingId} (с ID поста, без слага)
  • p-{postId}-h-{slug}-{headingId} (с ID поста и слагом)

Например:

На изображении показан подробный интерфейс онлайн-IDE, демонстрирующий синтаксис HTML-кода с выделенными элементами, включая тег якоря, связанные с ним значения, CSS-свойство flex и семантически релевантные структуры кода. (Подпись сгенерирована ИИ)
На изображении показан подробный интерфейс онлайн-IDE, демонстрирующий синтаксис HTML-кода с выделенными элементами, включая тег якоря, связанные с ним значения, CSS-свойство flex и семантически релевантные структуры кода. (Подпись сгенерирована ИИ)865×308 23.1 KB

Если вы предпочитаете, вы все еще можете создать якорь вручную с помощью HTML, например, <a name="anchor_name"></a>

На изображении показано окно веб-браузера с открытым полем ввода «Заголовок», содержащим HTML-код: «<<» за которым следует '<a name="test">Header</a>'. (Подпись сгенерирована ИИ)
На изображении показано окно веб-браузера с открытым полем ввода «Заголовок», содержащим HTML-код: «<<» за которым следует '<a name="test">Header</a>'. (Подпись сгенерирована ИИ)708×156 6.87 KB

На изображении показан HTML-код, создающий тег якоря, привязанный к «header-1», с атрибутами «name» и «href», установленными в «p-704-a-nametestestast Header» и «test» соответственно, что указывает на интерфейс навигации по веб-странице, связанный с мониторингом производительности. (Подпись сгенерирована ИИ)
На изображении показан HTML-код, создающий тег якоря, привязанный к «header-1», с атрибутами «name» и «href», установленными в «p-704-a-nametestestast Header» и «test» соответственно, что указывает на интерфейс навигации по веб-странице, связанный с мониторингом производительности. (Подпись сгенерирована ИИ)801×190 16.3 KB

Дополнительные ресурсы —
Если вам нужно сгенерировать оглавление, для вас есть этот компонент:

3

Большое спасибо @Arkshine!

Проблема в том, что мы публикуем markdown-файлы, которые используются в других целях в Discourse, поэтому люди, поддерживающие документацию, используют эти якоря для перекрёстных ссылок при объединении нескольких markdown-файлов в один документ.

Думаю, я напишу скрипт для очистки перед публикацией контента.

4

Понятно!

Решение также заключается в создании плагина для Discourse с поддержкой синтаксиса Markdown. Если у вас есть бюджет, вы можете обратиться в Marketplace.

5

@Nihokam

Если вы всё ещё заинтересованы, я создал небольшой плагин для Discourse, который позволяет указывать идентификатор якоря рядом с заголовком.

Он работает в дополнение к автоматическим якорям заголовков в Discourse.
Обратите внимание, что поддержка базовая. Вероятно, существует множество вариантов, но этот плагин поддерживает только следующий:

## Мой заголовок {#custom_section}

что сгенерирует:

<a name="custom_section" href="#custom_section" class="custom-anchor-id"></a>

На изображении показан интерфейс редактора Markdown с различными иконками форматирования HTML и Markdown, а также раскрытый список заголовков с заголовком 1, подзаголовком 1.1, ещё одним заголовком и символами пользовательских HTML-сущностей на панели инструментов. (Подпись сгенерирована ИИ)
На изображении показан интерфейс редактора Markdown с различными иконками форматирования HTML и Markdown, а также раскрытый список заголовков с заголовком 1, подзаголовком 1.1, ещё одним заголовком и символами пользовательских HTML-сущностей на панели инструментов. (Подпись сгенерирована ИИ)922×286 7.71 KB

image
image365×223 9.99 KB

На изображении показан фрагмент HTML с вложенными тегами <h2> и <h3>, содержащими пользовательские ссылки-якоря для кликабельных разделов с заголовками «Heading 1», «Sub-heading 1.1» и «Another heading». (Подпись сгенерирована ИИ)
На изображении показан фрагмент HTML с вложенными тегами <h2> и <h3>, содержащими пользовательские ссылки-якоря для кликабельных разделов с заголовками «Heading 1», «Sub-heading 1.1» и «Another heading». (Подпись сгенерирована ИИ)771×310 10.5 KB

Вы можете попробовать его! Дайте знать, если возникнут какие-либо проблемы.

6

Спасибо @Arkshine!

Я уточню у нашего админа Discourse насчёт его использования :grin:

7

@Arkshine, вы знаете, как генерируются якоря в Discourse (текущий сайт)? Спрашиваю, потому что они, кажется, не следуют паттернам, которые вы привели. Например, посмотрите это:

https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544#creating-a-simple-table-1

Есть ли для этого настройка? Я не мог её найти. Или они используют <a>? Или ваш плагин?