Есть ли способ сделать нумерацию заголовков, разделов и подразделов на языке уценки?

Я хотел бы перечислить заголовки, разделы и подразделы на языке уценки. Так что оглавление будет выглядеть так:

1. Heading1
2. Heading2
   2.1 Section1
   2.2 Section2
        2.2.1 Subsection1
        2.2.2 Subsection2

Я использую MKDOCS для создания своих статических веб-страниц, пакет apython. Существуют ли уценки-расширения, которые могут это сделать?

Я новичок в использовании языка уценки, любая помощь и предложения приветствуются.

Источник

3 ответа

Нумерация заголовков - это не то, что может сделать HTML, но есть стандартный способ сделать это с помощью CSS.

Если вы еще этого не сделали, добавьте эту декларацию в mkdocs.yml файл:

extra_css: [specific.css]

Тогда напишите это в specific.css файл в docsкаталог (это предложенный код CSS, дословно, поэтому я позволю вам проверить, работает ли он для вас):

body {
counter-reset : h2;
    }

h2 {
counter-reset : h3;
    }

h3 {
counter-reset : h4;
    }

h4 {
counter-reset : h5;
    }

h5 {
counter-reset : h6;
    }

article h2:before {
content : counter(h2,decimal) ". ";
counter-increment : h2;
    }

article h3:before {
content : counter(h2,decimal) "." counter(h3,decimal) ". ";
counter-increment : h3;
    }

article h4:before {
content : counter(h2,decimal) "." counter(h3,decimal) "." counter(h4,decimal) ". ";
counter-increment : h4;
    }

article h5:before {
content : counter(h2,decimal) "." counter(h3,decimal) "." counter(h4,decimal) "." counter(h5,decimal) ". ";
counter-increment : h5;
    }

article h6:before {
content : counter(h2,decimal) "." counter(h3,decimal) "." counter(h4,decimal) "." counter(h5,decimal) "." counter(h6,decimal) ". ";
counter-increment : h6;
    }

h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before {
content : "";
counter-increment : none;
    }
Источник

Ниже используются реагирующие и стилизованные компоненты:

Чтобы создать нумерацию заголовков для уценки, которая представляет собой автоматическую нумерацию в JupyterLab, вы можете использовать следующий стиль:

      import styled, { css } from 'styled-components'

/**
 * The index property is used to continually increment H1 headers
 * between sections / paragraphs
 * */
export type headerNumberingType = {
  display: boolean
  enableH1: boolean
  index: number
}

export const HeaderNumberingStyle = styled.div<{settings:headerNumberingType}>`
  ${(props) => props.settings.display && css`
    h1 { counter-reset: h1 h2 h3 h4 h5 h6 }
    h2 { counter-reset: h3 h4 h5 h6 }
    h3 { counter-reset: h4 h5 h6 }
    h4 { counter-reset: h5 h6 }
    h5 { counter-reset: h6 }
    h6 {  }
    
    ${props.settings.enableH1 && css `
      h1:before {
        counter-increment: h1 ${props.settings.index}; //increment by the index 
        content: counter(h1) ". ";
      }
    `}
    
    h2:before {
      counter-increment: h2;
      content: ${props.settings.enableH1
        ? css`counter(h1) "." counter(h2) ". ";`
        : css`counter(h2) ". "`      
      }
    }

    h3:before {
      counter-increment: h3;
      content: ${props.settings.enableH1
              ? css`counter(h1) "." counter(h2) "." counter(h3) ". ";`
              : css`counter(h2) "." counter(h3) ". "`
      }
    }

    h4:before {
      counter-increment: h4;
      content: ${props.settings.enableH1
              ? css`counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";`
              : css`counter(h2) "." counter(h3) "." counter(h4) ". "`
      }
    }

    h5:before {
      counter-increment: h5;
      content: ${props.settings.enableH1
              ? css`counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";`
              : css`counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "`
      }
    }

    h6:before {
      counter-increment: h6;
      content: ${props.settings.enableH1
              ? css`counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";`
              : css`counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "`
      }
    }
  `}
`

Важная часть стиля:

      h1 { counter-reset: h1 h2 h3 h4 h5 h6 }
    h2 { counter-reset: h3 h4 h5 h6 }
    h3 { counter-reset: h4 h5 h6 }
    h4 { counter-reset: h5 h6 }
    h5 { counter-reset: h6 }
    h6 {  }

Это приведет к сбросу номера заголовка при переходе от более высокого заголовка (h3) к более низкому заголовку (h2).

Переданные параметры предназначены для моих бизнес-спецификаций:

  1. display => разрешить отображать или скрывать номера заголовков
  2. EnableH1 => отображать/скрывать номера заголовков H1
  3. index => необязательно: будет увеличивать H1 между разделами

Чтобы использовать в реакции:

      import React from 'react'
import { HeaderNumberingStyle } from './MarkdownStyles'
const Home = () => {
  const sections:number[] = [1,2]
  const getSectionData = (index: number) => {
    switch (index){
      case 1:
        return (
          <div key={index * 1000}>
            <h1>Header 1</h1>
            <h6>Header 6</h6>
            <h2>Header 2</h2>
            <h4>Header 4 A</h4>
            <h4>Header 4 B</h4>
            <h2>Header 2 B</h2>
          </div>
        )
      case 2:
        return (
          <div key={2000}>
            <h1>Header 1 new section</h1>
          </div>

        )
    }
  }

  return (
    <div>
      { sections.map((i:number) => {
        return (
          <HeaderNumberingStyle key={i} settings={{ display: true, enableH1: true, index: i}}>
            <div key={i * 10}>
              { getSectionData(i)}
            </div>
          </HeaderNumberingStyle>
        )
      }) }
    </div>
  )
}

export default Home
Источник

Следующий инструмент CLI на основе Python перечисляет заголовки в вашей уценке.

https://github.com/a4vision/enumerate-markdown

Он добавляет заголовки в файл уценки. Например:

Вход

      # header
text
## sub-header
# header

Выход

      # 1. header
text
## 1.2 sub-header
# 2. header
Источник
Другие вопросы по тегам