4

I'm looking for a way to indent a Sub-Header and a text block in a gitit wiki

An example: gitit example

I do not like that H2 (and it's text block) is indented the same as the H1 I'd like H2 to be visibly a sub-block.

For the moment I did not find a solution - but maybe You know some 'nice hack' :)

sirkubax
  • 369
  • 1
  • 3
  • 9

1 Answers1

5

Neither Markdown nor HTML provide this out-of-the-box. Of course, you could always define some CSS to style your HTML how you want. The issue is getting Markdown to output the proper HTML. For example, you appear to want the paragraphs following a lower level header to be indented along with the header. How do you differentiate those paragraphs from the higher level header in your CSS? The easy way would be to wrap the entire header and sub-paragraphs in a <section> (or <div>) and then create a CSS rule to indent the entire section. Unfortunately, Markdown does not output such sections and while you can include raw HTML in your Markdown, generally Markdown text is not parsed inside raw HTML blocks. If you happen to be using a Markdown parser which does support Markdown inside HTML (you didn't say) then something like this should work:

<section class="level-1">
# Title H1
some text in p1 paragraph (under H1)
</section>

<section class="level-2">
## Title H2
some text in p2 paragraph (under H2)
</section>

Add a little CSS and you should be good to go. Perhaps:

.level-2 {
    padding-left: 5em;
}

However, a solution that will work across any Markdown implementation would be to nest your headers and paragraphs into lists as lists usually give you indentation out-of-the-box:

*   # Title H1

    some text in p1 paragraph (under H1)

    *   ## Title H2

        some text in p2 paragraph (under H2)

Which will render as:

  • Title H1

    some text in p1 paragraph (under H1)

    • Title H2

      some text in p2 paragraph (under H2)

Of course, you then get the bullets, which you may or may not want. If you would like to not have any bullets, you would again need some CSS to hide them. Perhaps:

ul {
    list-style: none;
}

Of course, that will globally remove the bullets from all lists in the document, which you may not want.

Waylan
  • 37,164
  • 12
  • 83
  • 109
  • Doing this disabled the effect of the # before the title. It all became text. I.e it got rendered as: # Title H1 – Pila Mar 26 '18 at 12:14
  • @Pila which Markdown implementation are you using? If you note, it does work here on Stackoverflow. – Waylan Mar 26 '18 at 13:38
  • I am not sure. But I am doing this for .md file for a bitbucket repo. – Pila Mar 26 '18 at 15:31