All geek questions in one place

Write html tag with Markdown?

In tumblr, markdowns are supported. I am trying to add a lighter syntax ( highlight.js ) in my tumblr, but you are having problems.

highlight.js needs to add a class attribute to the HTML tag.

I am trying to write such an article in my tumblr:

<pre class="test"> <code class="html"> function A(){ return "hello world"; } </code> </pre>

Result on a real page:

 <pre> <code> function A(){ return "hello world"; } </code> </pre>

The class attribute is gone ...... Is it possible to add an HTML attribute to Markdown?

+4
source share
2 answers

If you use google-code-prettify , you can do this (I am doing it now):

 $(document).ready(function() { $('pre').addClass('prettyprint'); prettyPrint(); });

Basically, you upload all the files:

 prettify.css sunburst.css // optional styles prettify.js

Add the code snippet above and call prettyPrint : onload="prettyPrint()" .

The code snippet above should go before all the files. It finds all the pre elements and adds the prettyPrint class to it so that the script knows how to style it.

If, however, you wanted to use the current syntax syntax, you could do something like this (using jQuery):

 $(document).ready(function() { $('pre').addClass('test'); $('code').addClass('html'); // code to intialize highlight.js });
+3
source

I just tried, it was not difficult.

http://softwaremaniacs.org/soft/highlight/en/description/ describes in the first code snippet what you need to connect to the html of your tumblr page to make it work. The code snippet will not load backlit in preview mode.

To use a marker, you must be able to bind a stylesheet and javascript. If you do not have hosting, the guys from highlight.js offer a hosted solution for free.

Add these 3 lines to the <head>...</head> tags

 <link rel="stylesheet" href="http://yandex.st/highlightjs/7.2/styles/default.min.css"> <script src="http://yandex.st/highlightjs/7.2/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>

All I added to my tumblr code post was

 <pre><code class="language-python"> ...your code here... </code></pre>
+1
source

Source: https://habr.com/ru/post/1435180/

More articles:


All Articles