I want to set an anchor in a .md file. The file is in the Team Foundation Server but the tag <a name="anchor"></a> does not work. Are there any other possibilities to set an anchor in a .md file?
I already tried the following:
Link to an anchor
[Question 22](answers.md#answer22)
Setting an anchor
<a name="answer22"></a> This is an answer for Question 22
The result is that clicking on "Question 22" the file answers.md is opened successfully but isn't "hopping" to Question 22. Furthermore the tag <a name="answer22"><a/> doesn't seem to be recognized as Code in the md. File in the TFS. If I open the File answer22.md and look at the preview (in TFS you can switch between "contents", "preview", "history" etc.) the tag is not hidden and you can see it in the preview as if it is just plain text.
As stated in Microsofts basic Markdown guidance, anchors are generated for every heading.
Just place your answer below a heading.
questions.md
[Question22]9(./answers.md#answer-22)
answers.md
## Answer 22
The answer is 42
See the Markdown Guide, Extended Syntax: Linking to Heading IDs.
This markdown:
[Heading IDs](#heading-ids)
Should be rendered to following HTML by most supported engines:
Heading IDs
Where the text of the headings serves as anchor-name in slug form (spaces converted to hyphens).
In Pandoc Markdown you can set anchors on arbitrary spans inside a paragraph using syntax [span]{#anchor}, e.g.:
[This is an answer for question 22]{#answer-22}
And then reference it as usual: [Question 22](#answer-22).
If you want to reference a whole paragraph then formally it's not possible but you can make a simple hack adding an empty span right in the beginning of the paragraph:
[]{#answer-22}
Paragraph text.
Related
I am using MarkEd which implements GitHub flavoured markdown.
I have some working markdown:
## Test heading
a paragraph.
## second heading
another paragraph
Which creates:
<h2 id="test-heading">Test heading</h2>
<p>a paragraph.</p>
<h2 id="second-heading">second heading</h2>
<p>another paragraph</p>
I would like to wrap that markdown section in a div, eg:
<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>
However this returns the following HTML:
<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>
Eg, no markdown, literally '## Test heading' appears in the HTML.
How can I properly wrap my markdown in a div?
I have found the following workaround, however it is ugly and not an actual fix:
<div class="blog-post">
<div></div>
## Test heading
a paragraph.
## second heading
another paragraph
</div>
Markdown
For Markdown, This is by design. From the Inline HTML section of the Markdown reference:
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.
But it is explicitly allowed for span-level tags:
Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.
So, depending on your use-case, you might get away with using a span instead of a div.
CommonMark
If the library you use implements CommonMark, you are lucky. Example 108 and 109 of the spec show that if you keep an empty line in between the HTML block and the markdown code, the contents will be parsed as Markdown:
<div>
*Emphasized* text.
</div>
should work, while the following shouldn't:
<div>
*Emphasized* text.
</div>
And, again according to the same section in the reference, some implementations recognize an additional markdown=1 attribute on the HTML tag to enable parsing of Markdown inside it.
Though it doesn't seem to work in StackOverflow yet:
Testing **Markdown** inside a red-background div.
GitHub Pages supports the markdown="1" attribute to parse markdown inside HTML elements, e.g.
<div class="tip" markdown="1">Have **fun!**</div>
Note: As of 2019/03, this doesn't work on github.com, only GitHub Pages.
Note: Quotes, as in markdown="1", are not required by HTML5 but if you don't use quotes (markdown=1), GitHub does not recognize it as HTML. Also, support is buggy right now. You will likely get incorrect output if your HTML element is larger than a single paragraph. For example, due to bugs I was unable to embed a Markdown list inside a div.
If you find yourself in an environment in which markdown="1" doesn't work but span does, another option is to use <span style="display:block"> so that block-level classes are compatible with it, e.g.
<span style="display:block" class="note">It **works!**</span>
Tip: <span class="note"></span> is shorter than <div class="note" markdown="1"></div>, so if you control the CSS you might prefer to use <span> and add display: block; to your CSS.
Markdown Extra is needed to be able to for Markdown formatting works inside an HTML blocks, please check the documentation stated here -> https://michelf.ca/projects/php-markdown/extra/
Markdown Extra gives you a way to put Markdown-formatted text inside
any block-level tag. You do this by adding a markdown attribute to the
tag with the value 1 — which gives markdown="1"
Last resort option:
Some libraries may be case sensitive.
Try <DIV> instead of <div> and see what happens.
Markdownsharp has this characteristic - although on StackOverflow they strip out all DIVs anyway so don't expect it to work here.
By looking at the docs for Extending Marked and modifying the html renderer method, you can do something like this to replace the parts between tags with parsed markdown. I haven't done extensive testing, but it worked with my first few attempts.
const marked = require('marked');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(/[^<>]+?(?=<)/g, (match) => {
const tokens = marked.lexer(match);
return marked.parser(tokens);
});
Edit
this new regex will ensure that only markdown with lines between it and the html tags will be parsed.
const marked = require('marked');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(/\n\n[^<>]+?\n\n(?=<)/g, (match) => {
const tokens = marked.lexer(match);
return marked.parser(tokens);
});
In my case (on GitHub), the problem was resolved when I added newline between html tags and markdown text.
I have hundreds of footnotes in scores of documents.
All are in HTML4 format. I have needed to update all the pages to HTML5.
When using a code checker for HTML5, I am informed that "NAME" as be deprecated and it I am getting warnings in to change the code.
I can't find a code example to resolve this. I am not looking to do anything fancy. I don't want to display the footnote by hovering the mouse over the call to the footnote. I just want to be able to click on a footnote number and get to it at the bottom of the page and then return! I don't see how that is done without "NAME."
Currently as an example, this is what a my code looks like. (I make have ten or more footnotes on any given page.
<P>This is in the regular text
<A NAME="sdfootnote1anc" HREF="#sdfootnote1sym"><SUP>1</SUP></A>></P>
AND it calls this at the bottom of the page.
<p><DIV ID="sdfootnote1">
<A NAME="sdfootnote1sym" HREF="#sdfootnote1anc">1</A> - Here I am explaining it before I go on after the break to the next footnote.</DIV><BR>
Change name to id
<A CLASS="sdfootnoteanc" id="sdfootnote1anc" HREF="#sdfootnote1sym">
<A CLASS="sdfootnotesym" id="sdfootnote1sym" HREF="#sdfootnote1anc">1</A>
Just started jekyll, and I want to display a link to one of my posts on the index.html page. I looked through the documentation and the following code appears to be what I'm suppose to do.
The following is in index.html
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
but it simply displays
.....
[Hello World]({% post_url 2015-01-19-soccer %})
.......
what am I doing wrong?
Since you used a mix of Markdown and HTML, which is causing the markdown processor to ignore anything in between the HTML blocks.
Markdown is also sometimes not processed when you have HTML right above the Markdown. (This is the case for you, since your example shows you have closed off the <p> tags)
There are a few ways around this.
Make sure there is a newline in between any HTML and Markdown, this will not show up as a <br> or a <p> in the final output, but rather ensures that the processor will convert the Markdown correctly.
So you should have something like this:
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
Notice the extra line there between the first <p></p> and the Markdown.
Use only HTML (this is as answered by user #topleft)
Use only Markdown, since <p> tags are supported.
Try the markdown=1 HTML attribute.
Markdown processors like Kramdown allow you to add an explicit tag to tell the processor to go through HTML blocks and process any Markdown there. I'm assuming you're using the default (which I believe is Redcarpet) and couldn't find the links on whether this is supported. But you can try this:
<div id="someDiv" markdown=1>
[This is a Markdown link that will be parsed](http://www.example.com)
</div>
You are using markdown language here, it won't work in html. You need to use that instead :
Hello World
site.baseurl default is empty
you can change it in _config.yml to suit your needs
for instance :
baseurl: "me/blog"
I came across with an issue where RTF field in TRidion 2011 is removing HTML5 tags while saving component.
Issue:
Source snippet
<div>
<a class="arrow button" data-role="button" data-inline="true" href="www.google.com">Information</a>
</div>
Tridion is saving above snippet
<div>
<a class="arrow button" href="www.google.com">Information</a>
</div>
In short Tridion is removing HTML5 attribute while saving the component.
Please give some hint to resolve above issue.
For this you can extend the RTF field to allow HTML5 tags for this you have to specify these tags in a file TcmXhtml.Config at the path
[Tridion]\web\WebUI\Core\Controls\FormatArea\TcmXhtml .
Tridion uses XHTML to store rich text fields. Since the attributes you specified are not valid XHTML, Tridion removed them.
You can modify the list of attributes and elements allowed in the Rich Text Area (see Ram's answer) but keep in mind that you are now allowing these attributes to be used in all Rich Text Fields, and you have to consider the impact of this change to your whole environment. If you're doing this as a quick work-around a design limitation (which is what it sounds like) remember that EDITORS will have to do the same. Structure data shouldn't necessarily be in a RTF, and perhaps certain elements of your output should be handled by a template and not by an editor.
In the \Tridion\web\WebUI\Core\Controls\FormatArea\TcmXhtml\TcmXHTML.config file, update the tag "drop-proprietary-attributes" to be "false":
From: drop-proprietary-attributes: true
To: drop-proprietary-attributes: false
Restart the COM+ and clear the browser cache.
To answer my question, take a look at the following entry in our Knowledge Base:
http://tridion.kb.sdl.com/kb/?ArticleId=4065&source=Article&c=12&cid=19#tab:homeTab:crumb:7:artId:4504
Additionally, you can add other HTML 5 tags in the configuration file mentioned in the article above.
For example, if you wanted to stop the following tags from being removed, add:
new-blocklevel-tags: article aside canvas details figcaption figure footer header hgroup nav output progress section video
new-inline-tags: audio datalist mark meter summary time
new-empty-tags: command source track
I'm trying to figure out how to reference another area of a page with Markdown. I can get it working if I add a
<div id="mylink" />
and for the link do:
[My link](#mylink)
But my guess is that there's some other way to do an in-page link in Markdown that doesn't involve the straight up div tag.
Any ideas?
See this answer.
In summary make a destination with
<a name="sometext"></a>
inserted anywhere in your markdown markup (for example in a header:
## heading<a name="headin"></a>
and link to it using the markdown linkage:
[This is the link text](#headin)
or
[some text](#sometext)
Don't use <div> -- this will mess up the layout for many renderers.
(I have changed id= to name= above. See this answer for the tedious explanation.)
I guess this depends on what you're using to generate html from your markdown. I noticed, that jekyll (it's used by gihub.io pages by default) automatically adds the id="" attribute to headings in the html it generates.
For example if you're markdown is
My header
---------
The resulting html will look like this:
<h2 id="my-header">My header</h2>
So you can link to it simply by [My link](#my-header)
With the PHP version of Markdown, you can also link headers to fragment identifiers within the page using a syntax like either of the following, as documented here
Header 1 {#header1}
========
## Header 2 ## {#header2}
and then
[Link back to header 1](#header1)
[Link back to header 2](#header2)
Unfortunately this syntax is currently only supported for headers, but at least it could be useful for building a table of contents.
The destination anchor for a link in an HTML page may be any element with an id attribute. See Links on the W3C site. Here's a quote from the relevant section:
Destination anchors in HTML documents
may be specified either by the A
element (naming it with the name
attribute), or by any other element
(naming with the id attribute).
Markdown treats HTML as HTML (see Inline HTML), so you can create your fragment identifiers from any element you like. If, for example, you want to link to a paragraph, just wrap the paragraph in a paragraph tag, and include an id:
<p id="mylink">Lorem ipsum dolor sit amet...</p>
Then use your standard Markdown [My link](#mylink) to create a link to fragment anchor. This will help to keep your HTML clean, as there's no need for extra markup.
For anyone use Visual Studio Team Foundation Server (TFS) 2015, it really does not like embedded <a> or <div> elements, at least in headers. It also doesn't like emoji in headers either:
### 🔧 Configuration 🔧
Lorem ipsum problem fixem.
Gets translated to:
<h3 id="-configuration-">🔧 Configuration 🔧</h3>
<p>Lorem ipsum problem fixem.</p>
And so links should either use that id (which breaks this and other preview extensions in Visual Studio), or remove the emoji:
Here's [how to setup](#-configuration-) //🔧 Configuration 🔧
Here's [how to setup](#configuration) //Configuration
Where the latter version works both online in TFS and in the markdown preview of Visual Studio.
In Pandoc Markdown you can set anchors on arbitrary spans inside a paragraph using syntax [span]{#anchor}, e.g.:
Paragraph, containing [arbitrary text]{#mylink}.
And then reference it as usual: [My link](#mylink).
If you want to reference a whole paragraph then the most straightforward way is to add an empty span right in the beginning of the paragraph:
[]{#mylink}
Paragraph text.