# Hanging Indent in .md & maintaining formatting

**URL:** <https://discourse.gohugo.io/t/hanging-indent-in-md-maintaining-formatting/25932>\
**Category:** support\
**Created:** [May 31, 2020, 12:26am UTC](https://discourse.gohugo.io/t/hanging-indent-in-md-maintaining-formatting/25932 "2020-05-31T00:26:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![stockphrase](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stockphrase/32/11244_2.png) [@stockphrase](https://discourse.gohugo.io/u/stockphrase)\
**Post date:** [May 31, 2020, 12:26am UTC](https://discourse.gohugo.io/t/hanging-indent-in-md-maintaining-formatting/25932/1 "2020-05-31T00:26:54Z")

</div>

I’m trying to make a hanging indent to publish MLA and Chicago-formatted bibliographic references on my Hugo site. In the .css, I’ve created a new selector to perform MLA-formatted indentation of references:

```
  .p2 {
    padding-left: 40px;
    text-indent: -40px;
    line-height: 2.5; 
}

```

If I put the following code in my markdown, I get the line spacing and indentation I want, but the asterisks used to create italics become literals, as if they are escaped.

So the code below produces…

`<p class="p2"> Greely, Fred, Mary Jones, and Greg Attiks. *There's a Bat in My Barn: Struggles with the New Hampshire Brown Bat*. Wildlife Press, 2012.</p>`

 ![Screenshot from 2020-05-31 06-22-32](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/7/78c45df063f4827087d25c4305fd1a6f9ed40009.png)

However, if I use a line separating the paragraph class and the content, I get the markdown styling but not the spacing.

So the code below produces . . .

```
<p class="p2"> 

Greely, Fred, Mary Jones, and Greg Attiks. *There's a Bat in My Barn: Struggles with the New Hampshire Brown Bat*. Wildlife Press, 2012.

</p>

```

 ![Screenshot from 2020-05-31 06-25-39](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/b/b9a97adc61ec5a5d5501f874a8b532b34d9f7cb7.png)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 31, 2020, 2:09pm UTC](https://discourse.gohugo.io/t/hanging-indent-in-md-maintaining-formatting/25932/2 "2020-05-31T14:09:59Z")

</div>

> [@Markdown not being rendered within HTML block](https://discourse.gohugo.io/t/markdown-not-being-rendered-within-html-block/2532/6):
>
> Sorry to bump this thread out of the ground. To have markdown rendered within HTML blocks, what is [usually](https://stackoverflow.com/a/29378250/26465) done in [other](https://kramdown.gettalong.org/syntax.html#html-blocks) Markdown [dialects](https://michelf.ca/projects/php-markdown/extra/#markdown-attr) is to add a markdown=1 option in the html outer tag. An [other solution](https://github.github.com/gfm/#example-153) retained in Github Flavoured Markdown is to add blank lines this way: \<div\> \*Emphasized\* text. \</div\> This kind of behaviour is currently what I need to render a gallery. I am doing it this way: \<div class="gallery" markdown=1\> ![Image 1](image\_link "image caption") ![Image 2](image\_…

Solution: use a shortcode.

Template (`/layouts/shortcodes/biblio-ref.html`):

```html
<p class="p2">
  {{ .Inner | .Page.RenderString }}
</p>

```

Markdown:

```md
{{< biblio-ref >}}
Greely, Fred, Mary Jones, and Greg Attiks. *There's a Bat in My Barn: Struggles with the New Hampshire Brown Bat*. Wildlife Press, 2012.
{{< /biblio-ref >}}

```

Result:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/1/13d1bc4094e9c3d8e7f885e82eff3e9bac3ee2b4.png)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 31, 2020, 3:06pm UTC](https://discourse.gohugo.io/t/hanging-indent-in-md-maintaining-formatting/25932/3 "2020-05-31T15:06:50Z")

</div>

V2. Handles multiple references, one per line.

Shortcode:

```auto
{{- $p := .Page -}}
{{- range (split .Inner "\n") -}}
  {{- if gt (len .) 0 }}
  <p class="p2">
    {{ . | $p.RenderString }}
  </p>
  {{- end }}
{{- end -}}

```

Markdown:

```auto
{{< biblio-ref >}}
Hugo, Victor. *The Hunchback of Notre-Dame*. Unknown publisher, 1831.
Hugo, Victor. *Les Misérables*. Unknown publisher, 1862.
Hugo, Victor. *Les Travailleurs de la Mer*. Unknown publisher, 1866.
Hugo, Victor. *Quatre-vingt-treize*. Unknown publisher, 1874.
{{< /biblio-ref >}}

```

---

<div class="post-metadata">

**Author:** ![stockphrase](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stockphrase/32/11244_2.png) [@stockphrase](https://discourse.gohugo.io/u/stockphrase)\
**Post date:** [May 31, 2020, 3:41pm UTC](https://discourse.gohugo.io/t/hanging-indent-in-md-maintaining-formatting/25932/4 "2020-05-31T15:41:58Z")

</div>

You are the master! I tip my hat sir.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [June 2, 2020, 3:42pm UTC](https://discourse.gohugo.io/t/hanging-indent-in-md-maintaining-formatting/25932/5 "2020-06-02T15:42:02Z")

</div>

Closed on June 2, 2020, 3:42pm UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.