I am new to github, in README.md want to display a HTML content using an Iframe or something is this possible ?
What I have tried is I just create HTML tags other then anchor, that is not working.
Github's markdown interpreter can include HTML. However, there is only so much you can do in HTML. I would suggest checking out this article which provides more information on what tags can be used. Personally, I have never used much more than line-breaks, horizontal rules, etc... Unfortunately, I don't see Iframes mentioned in the article.
As answered by mjgpy3, you can include html - no <html> tags needed, but it'll be sanitized before display and the only tags allowed are in this whitelist.
The list currently includes:
h1 h2 h3 h4 h5 h6 h7 h8 br b i strong em a pre code img tt div ins del sup sub p ol ul table thead tbody tfoot blockquote dl dt dd kbd q samp var hr ruby rt rp li tr td th s strike summary details caption figure figcaption abbr bdo cite dfn mark small span time wbr
but no iframe.
You can use svg to work around, example code (./path/example.svg):
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100" height="100">
<div xmlns="http://www.w3.org/1999/xhtml">
<ul>
<li>text</li>
</ul>
<!-- Other embed HTML element/text into SVG -->
</div>
</foreignObject>
</svg>
and then use image insert way to embed the svg file in any other markdown file, like this:
Related
I would like to export an org-mode file with labelled latex formulas inside it to HTML without having the \label{eq:1} in the output. Do you know how to do this?
You can try something like this (assuming you are using org-ref https://github.com/jkitchin/org-ref) which exports the ref link to html:
* equations in html
See ref:eq-1.
#+BEGIN_HTML
<div id="eq-1">
#+END_HTML
\begin{equation}
e^x = 4
\end{equation}
This exports to something like:
<div id="eq-1">
\begin{equation}
e^x = 4
\end{equation}
<p>
See eq-1.
</p>
You can likely hide that using CSS, like so:
.figure-number {
display: none;
}
I'm using markdown.pl downloaded from directly from Darring Fireball to translate .md files into html.
I start the file with some block level html, then followed by markdown syntax
<div class="header">title</div>
# header
markdown keeps wrap the <div> class with <p> tags, producing:
<p><div class="header">title</div></p>
<h1>header</h1>
If I start the file with a newline, before the html block level tag, an empty will be produced
<p></p>
<div class="header">title</div>
<h1>header</h1>
I want to know how to stop markdown from wrapping my block-level HTML tags with <p>s.
That code is not maintained because Gruber don't care. ¹ ²
Use Text-Markdown Markdown.pl instead, it works like you expect it to.
during my test, I find when converting following html content to docx, the original style will be lost.
< a href="http://www.google.com">Google< /a>
result in docx: no underline.
< p>< span style="text-decoration: underline;">underline text< /span>< /p>
result in docx: no underline
< p>< span style="text-decoration: line-through;">delete text< /span>< /p>
result in docx: no delete line
< p style="margin-left:30.0px;">indent text< /p>
result in docx: no any indent
< h1>header line< /h1>
result in docx: only plain text
< p>< span style="background-color: rgb(255,255,0);">background color< /span>< /p>
result in docx:no any background-color
< hr/>
result in docx: empty
< table style="border-width:1px;">...
result in docx: no border
< span style="font-family: arial , helvetica , sans-serif;font-size: large;">...
result in docx: font setting all missed.
Any one know how to deal with these issues? or any workaround?
The comment in the XHTMLImporter source code notes that some of these things remain to be implemented.
Re your #4, I think indent is supported. Maybe just not for the units you have used?
Re your #8 table borders, there is some support for these; Google for other posts.
Implementing underline, delete, and background-color all ought to be straightforward.
If you'd like to do that, we're happy to accept a pull request.
If I use the folowing syntax,
#+ATTR_HTML: width="200"
[[file:highres.jpg][file:highres.jpg]]
I should expect that the page would display highres.jpg in the specified size, and when clicked on, would like to the file itself? Which is what I get from these instructions. However, when I generate the html from an org-mode file, the image is displayed but not linked/clickable. Am I doing something wrong or have I misunderstood?
In more recent versions of org-mode, the format seems to have changed. The following works for me in Emacs 24.4.1:
#+ATTR_HTML: :width 200
[[file:highres.jpg]]
In your example it is treating it as being without description because the description is identical to the link itself. The instructions you link to say to use a generated thumbnail for the description (which will be displayed instead of the full image).
On the other hand, I wasn't able to get it to respect #+ATTR_HTML: width="200" when I did change the description text to allow for a difference
#+ATTR_HTML: width="200"
[[file:highres.jpg][./highres.jpg]]
Instead the inlined clickable image was full-size. I don't know if this is intended or not, the best place to ask that would likely be the mailing list (where they may also be able to fix it if it is a bug).
Added Testing of issue
Using the following Org snippet
* SVG test
#+CAPTION: Test
#+ATTR_HTML: width="200" title="Hello"
[[./img/Bitmap.svg][file:./img/Bitmap.svg]]
#+Caption: Test2
#+ATTR_HTML: width="200" title="Hello as well"
[[./Bitmap.svg]]
I get the following HTML, which does explain why the strange result with regards to image sizes occurs:
<p>
<img src="./img/Bitmap.svg" alt="Bitmap.svg"/>
</p>
<div class="figure">
<p><img src="./Bitmap.svg" width="200" title="Hello as well" alt="./Bitmap.svg" /></p>
<p>Test2</p>
</div>
The initial image is being adjusted in size, instead of the link image. Definitely a question of how the exporter interprets the #+ATTRL_HTML information. Under the current exporter the best choice might well be to generate a thumbnail of the image for insertion.
I want foo foo foo ... to be aligned next to be an image, but for bar bar bar ... start a new block of text which is not aligned with fig.jpg. Can this be arranged with some special syntax in org-mode?
#+ATTR_HTML: height="100" align="left"
[[./img/fig.jpg]]
foo foo foo ...
bar bar bar ...
Edit
Just wanted to add that when bar bar bar ... is also another section heading, for instance ** Section 2 or something similar, it seems like a new section should not be wrapped with the previous figure by default, but perhaps there is some org-syntax to specify this?
Upon HTML export, the image is wrapped in a <div class="figure">...</div> environment. The org-mode #+ATTR_HTML: informatio gets added specifically to the <img> tag within the <div>.
If you are wanting all of your figures to be "floating" such that the text wraps it, you need to modify the style used in the HTML. This can be done manually in the default style sheet added to the top of the exported HTML file. A better option is to specify the style you want within the .org file itself. Something like:
#+STYLE: <style type="text/css">
#+STYLE:<!--/*--><![CDATA[/*><!--*/
#+STYLE: div.figure { float:left; }
#+STYLE: /*]]>*/-->
#+STYLE: </style>
at the beginning of your .org file. This will set the style of all <div class="figure"> elements to be floating on the left with text wrapping around on the right hand side. The following text after the figure will also be wrapped to the right, so you'll want to clear the style with something like a <br style="clear:both;" /> statement.
This worg page has a lot of information about figure placement with captions and word wrapping. There is more detailed information there.