Is there a solution to use HTML in markdown files - or an option to display a whole extra page that is pure HTML?
Problem: I want to include an html snippet in my mkdocs generated wiki that uses some inline Javascript.
Tried: I have been searching for a few hours now and could not find an answer here or in the official docs.
Simply include the HTML in your Markdown document. MkDocs does not document this because this is standard Markdown behavior. In fact, the Markdown rules state:
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.
...
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.
Related
I came across an article a while ago which explained why some HTML tags can be nested in some tags and some tags cannot do that. But I forgot the keywords that describe this design in the browser/HTML specification to validate a valid HTML. I believe that there are two keywords that describe this, but I forgot them. Can someone help me out?
The keywords are not structural/presentation.
All I remember that the two keywords are handy to remember why some HTML tags can be nested in some tags, but not in some tags.
For instance
<p><div></div></p>
is not valid HTML
Thanks
As one comment suggests, you're probably thinking of "block" elements (which break the flow of content, have 100% default width and can contain other elements) and "inline" elements (don't break the content flow so they won't create a text line of their own, their width adjusts to the content and are not containers in nature).
This is mentioned in HTML4: https://www.w3.org/TR/html401/struct/global.html#h-7.5.3
Generally, block-level elements may contain inline
elements and other block-level elements. (...) inline elements
may contain only data and other inline elements. Inherent in this
structural distinction is the idea that block elements create "larger"
structures than inline elements.(...) Generally,
block-level elements begin on new lines, inline elements do not.
The HTML5 spec, however, will talk about categories instead: https://dev.w3.org/html5/html-author/#categories
HTML4 used inline and block-level but HTML5 says:
HTML does not use the terms "block-level" or "inline" as part of its
content model rules, to reduce confusion with CSS.
So these terms may now be better suited to a type of CSS display rendering mechanism.
At the top of this README.md (raw code at the top of this page), I am trying to float an image next to a Markdown table. My efforts with the float style property and align attribute in img have been unsuccessful.
As long as your document is hosted on GitHub you can't.
As documented in GitHub's Markup library, after the Markdown is converted to HTML, the...
HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
In other words, anything you include in the Markdown to "style" your document (style tags, inline-styles, etc.) will be stripped out by the sanitizer. If you want control over the look and styling of your documents, then you need to host them somewhere where you have complete control. GitHub is not that place.
your table has width:100% and won't let any elements besides. try changing its width to width :auto and display from block to display:inline-block. also, change the image container to display:inline-block
When reading about HTML, I realized that most of the formatting tags (such as <bold> or <i>) seem to just be shortcuts. For instance, <b>text</b> could be replaced with <span style="font-weight: bold;">text</span>
<b>text</b>
<span style="font-weight: bold;">text</span>
I understand the idea to have shortcuts to typical formatting (though I believe that this was more useful before, when HTML was built manually and not generated from, say, Markdown) and would like to know whether there are any tags which are not substituable because they have a special meaning for rendering.
<html>, <head>, <body>, <style> and other "logistics" tags come in mind ("logistics" in the sense that they do not influence how the rendered text looks like but rather either structure the high level document (<html>, <head>, <body>) or allow extra elements to be inserted <style>, <link>, etc.)
In other words: are the formatting tags just shortcuts (and could be replaced by a styled <span> or <div>) or do they carry some special meaning?
HTML tags are used not only to render text on the screen. Accessibility tools and search engines' crawlers also use them to define (or at least to guess:) the meaning of the content. Some accessibility platforms have special mappings for some tags (e.g., Windows UIA platform maps the dfn element to the Accessible Object of the 'definition' type). Search engines algorithms also have different assumptions for different tags (e.g. text wrapped in strong would usually be considered more 'relevant' to the search query than text wrapped in i, and both usually would be considered more 'relevant' than text wrapped in span, regardless its styling).
Indeed, semantic tags such as nav, footer or section DO have a special meaning for search engine.
You can learn more here: https://www.w3schools.com/html/html5_semantic_elements.asp
Also, you should build your html based on SEO friendly only and transfer all your styling to css (avoid style attribute if possible)
is their a way to include an external document at compile time inline and inside a tag with text using jade/pug templating?
for example, something like:
p paragraph text content with #[span.icon #include path_to_file/icon.svg] inline svg thrown into the html document
but not this solution:
p paragraph text content with #[span.icon #[svg #[use(href='path_to_file/icon.svg')]]]
i know the later works, but i'm looking for a solution that doesn't use the use tag or an external reference
solution needs to result in importing the document inside the tag in between the words at compile time.
i've looked through the pug documentation many times. only things close to this are tag interpolation and block expansion, but they don't seem to allow for this situation specifically.
thanks!
You should be able to use the vertical bar without having to use string interpolation:
p
| paragraph text content with
span.icon
include path_to_file/icon.svg
| inline svg thrown into the html document
See tag interpolation here: https://pugjs.org/language/interpolation.html
<pre> tag is commonly known as "preformatted text".
There is also a white-space CSS property which enables pre-like behaviour for any tag. However on it's description page at W3Schools and at CSS3 specs page this behavior is described as a "preserving space algorithm". In the same spec there is only a single place in which 'white-space' is referenced as a preformatted text.
Is this nonsense or maybe <pre> was initially a shorthand for a "preserving space" tag?
What's the background of this tag? I'm not a professional HTML designer, I know what's the meaning of the both versions, but I don't know how it is referenced or was referenced by people. Is naming it 'preserving space' is a correct technical term which no-one uses?
Of the two links you gave, W3Schools is probably not the best place to go for a reliably accurate definition like this.
And while the MDN page that you linked to is a much better resource, it is not the official CSS3 spec that you think it is; you'll find the official spec at http://www.w3.org/TR/CSS2/text.html#propdef-white-space
If you read the official spec, you'll find that the behaviour is not described using either of the phrases you mentioned in the question. (The word 'preserved' does appear, but only in the context of newlines).
The <pre> tag itself predates CSS; it was in very early versions of HTML, and was defined in those as "Preformatted text", but from a CSS perspective there is no specific meaning to the letters pre, other than referring back to the behaviour of the original HTML element of that name.
Early W3C documents, such as Hypertext Markup Language - 2.0 (dating from 1995) all call the <pre> element Preformatted text.
Although some files also refer to the fact that <pre> "preserves spaces", they do indicate that's a result of the preformatting, not the intended purpose of this element.
For instance, the HTML 3.2 Reference Specification says
The PRE element can be used to include preformatted text. User agents render this in a fixed pitch font, preserving spacing associated with white space characters such as space and newline characters.
The PRE-tag was and is used to display text with whitespace preserved. So text does not wrap, newlines are not ignored, spaces are not ignored.
It is however possible to undo this any way you like with CSS (or Javascript).