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
Related
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
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.
So I found out recently that just like
<p> and <a>
you can use your own like
<o> and <k>
and style them in a css sheet by just using
o {} and k {}
which is pretty cool but unlike
<a> which you can href to
you can't do this with
<o> because <o href="url"></o> just doesn't work, even when adding the styling for cursor hover and o:focus {etc..} and o:hover {etc..}
Could anyone explain why? I got around it by using spans but it would be cool to be able to use any combination of letters for custom tags which have href functionality
Stay away from defining your own tags. XML offers users the ability to define their own tags, while HTML (especially HTML5) wants the user to use the pre-defined tags consistently.
The reason why you can't use href on just anything you like is because HTML just doesn't allow it. You use <a>s when placing links, <span>s to style certain word(s) of a text.
http://www.w3schools.com/tags/tag_span.asp
For the simple reason that if you define a "custom" element like this:
<o href="url">go to page x</o>
you probably mean a behavior like this:
go to page x
But what we are "supposing" can't be simply "predicted" by the browser; so, basically, the browser wouldn't know how to manage those attributes which you are giving to your custom tag...
Indeed, when you use something like <o>...</o> "tag" you are NOT defining a REAL custom tag; you are just placing a markup: whose regard the browser is simply "trasparent" (indeed doesn't do anything) just shows what is inside (if "showable") as if the "custom tag" wasn't there (we might say a "null" inline element). It can be managed, of course, trought CSS and Javascript that will specify the rest...
To build a real custom element you should place it in the register trought Javascript, with a specific sintax for the name, defining (trought Javascript) attributes and behavoirs...
There is web-site for Nodeclipse FOSS project http://www.nodeclipse.org/
I am not quick at web development and styles, and there is problem I don't know how to approach:
On the main page http://www.nodeclipse.org/index.html there is <pre> element (source line)
and after it style is always different than at pragraph start.
I guess there's something to be in applied http://www.nodeclipse.org/pipe.css" (source), but what to look for? (As it is not about pre element but what happens after it)
FOSS project needs help with web.
As you can see, <pre> tag usage inside <p> tag breaks the DOM structure
So the text after pre tag are not enclosed inside the <p> tag.
It is not advised to use pre tag to display a content that doesn't lose it's meaning if not pre-formatted.
So use a <a> tag or some other suitable tags like span (if you don't want it to be a clickable link) to display the url and style it accordingly.
Is there a way to style comments inside a pre or code block (e.g. Ruby comments) using only CSS?
For example:
# I am a comment and should be lighter and italic
I = { :am => :normal_code, :and_want_no => :special_treatment }
I know you can use Javascript/jQuery to insert <span> elements in the right spots (like the <span>'s in the comment above provided by Stack Overflow) but can it be done with just CSS?
For background, I use a markdown renderer which outputs simple <pre> and <code> elements where necessary but without any hooks for indicating which language you're using and how to flag comments with <span> elements.
This task can't be done with just CSS.
CSS works at the element level and it is not possible to "select into" general text - even trivially, much less applying some rules to parse language grammar.
As noted, and as seen by inspecting the SO code rendering such as the one in this post, one approach is to output spans with the appropriate CSS classes (which are the result of separate grammar processing) - then these individual spans, which can selected, are styled.
a) What markdown renderer?
b) This can't be done with CSS with classes or ID's, as well as psuedo
elements
I will expand further as you do.
The problem is, you can't exactly render comments with your provided method, as these are technically never rendered in the first place.
comments are meant to be non-runnable code to help for debugging. Trying to add comments or manipulate comments would be a security breach and would require actually inserting a file into your appreciable code.
As far as that would go? That would be a tricky scenario unless you had the same comment or multiple files available to do so. I would say to just import your file if necessary with a duplicate version with a commented version.