CODEWITHSUNDEEP
csshtmlmarkdownjekyll
Peter Zhu
Peter Zhu

Reputation: 1194

how to reference code in Markdown?

I write markdown file mainly for my jekyll blog, so liquid method is okay

When inserting raw HTML code in to markdown. The whole markdown code page seems ugly and confused. And it will be difficult to modify days later.

So can I just make some of code be reference-style. To be more specific, put the raw HTML code at the bottom of the markdown code page and just use the [...] at the original paragraph. Just like the link and image reference-syntax.

origional code here

< a href="if there is a long long boring HTML link here but I want to put it at the bottom" />

what I want to do is here

[ a brief reference code ]

< a href="there is still a long long boring HTML link here but I had it put at the bottom" />

Upvotes: 1

Views: 4817

Answers (2)

JMH
JMH

Reputation: 1279

Markdown has no way of referencing content except for links:

- item 1
- item 2
- [boring_link]
- para3

[boring_link]: https://boring.com/link.html "description of boring link"

With Jekyll you can use Liquid's capture tag (even in .md files):

{% capture reference %}
… any html content …
{% endcapture %}
…
{{ reference }}

But this only works if you capture your content first.

I'm afraid, it's not possible to do exactly what you want; but depending on your actual HTML content there should be multiple alternatives.

Upvotes: 1

Seth Warburton
Seth Warburton

Reputation: 2423

Jekyll has inbuilt syntax highlighting for displaying code, which will not only ensure it is rendered correctly (i.e. wrapped in <pre> and <code> elements) it also adds language specific styling.

For html highlighting you can use {% highlight html %}, for example:

{% highlight html %}
    <div class="alert alert-success" role="alert">
    <strong>Boom!</strong> I'm a code example.
    </div>
{% endhighlight %}

Upvotes: -1

Related Questions