I'm writing Markdown content in Nuxt 3 & Nuxt Content 2.1 and I am facing a problem as I cannot write h2-h6 headers without it rendering them as links.
h1 works fine with one octothorpe symbol but as soon as I add 1 or more of them to render smaller headers, the application automatically transforms them to URLs.
Content is rendered with the default [...slug].vue and <ContentDoc /> configuration as seen in the documentation.
What's written in Markdown:
# header 1
## header 2
... and what's actually being rendered in HTML:
<h1 id="header-1">
<!--[-->
header 1
<!--]-->
</h1>
<h2 id="header-2">
<a href="#header-2">
<!--[-->
header 2
<!--]-->
</a>
</h2>
Is there any way to solve this?
EDIT:
Nuxt is also transforming simple HTML <h2> tags to links, but now with an undefined href:
<h2>header 2</h2>
to
<h2>
<a href="#undefined">
header 2
</a>
</h2>
Checkout the Nuxt Content doc here:
In Nuxt Content, Prose represents the HTML tags output from the Markdown syntax, for example title levels, links... A Vue component corresponds to each tag, allowing you to override them if needed.
By default, h2 becomes <a> tag in <h2> tag, it is defined in this file. These files are listed in components/prose section.
You may overwrite it by:
create components/content directory
create ProseH2.vue in it
copy the code from the origin file, in the template section, remove the <a> tag and the v-else, or whatever modification you want to do with it:
<template>
<h2 :id="id">
<slot />
</h2>
</template>
Restart server, it should changes.
You can also change this behaviour in your nuxt.config file
content: {
markdown: {
anchorLinks: false,
}
},
https://content.nuxtjs.org/api/configuration/#anchorlinks
Related
How do you center an item with Markdown? I'm looking for a solution that works in Grav.
Markdown does not support this feature natively, but you can achieve this wrapping Markdown into HTML.
As a rule of thumb, most 'flavors' of Markdown will render this as centered text:
<p style="text-align: center;">Centered text</p>
Specifically for Grav, as their documentation states, you should do these following steps:
in your system configuration file user/config/system.yaml make sure to activate the markdown extra option:
pages:
markdown:
extra: true
in your wrapper tag make sure to add the parameter markdown="1" to activate processing of markdown content:
<div class="myWrapper" markdown="1">
# my markdown content
this content is wrapped into a div with class "myWrapper"
</div>
For me it worked with the following hack: adding the tag div on top without closing the div tag. This makes the entire markdown centralized
<div align="center">
When using any element such as a title, you can use an equivalent html tag, for instance
# Title
## title 2
is equivalent to
<h1> Title </h1>
<h2> Title 2 </h2>
With title, for instance, you can align the text using the following attribute:
<!-- title only -->
<h1 align="center"> Title </h1>
<!-- title with div -->
<div align="center"> <h1 align="center"> Title inside div! </h1> </div>
But sometimes you don't want to use HTML, because it butches the capability of using markdown inside it, in these cases, you can use span, which allows you to render markdown inside HTML tags:
<!-- title with span (you can render emojis or markdown inside it) -->
<span align="center"> <h1> :star: My Career: </h1> </span>
Please note that this attribute is deprecated, while it's deprecated, it is also the only one that works with some flavors of markdown, such as Github's markdown
I got a theme which inside app.component.ts file on template block contains:
<main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
<div class="additional-bg"></div>
<router-outlet></router-outlet>
</main>
AFAIK this element should have somewhere a selector referencing it but I am not able to find it anywhere. maybe this main tag is something internal for angular 2 and automatically loaded?
Thanks,
After some research, found the answer to your question.
The <main> tag is new in HTML5.
The tag specifies the main content of a document. Check this documentation about this tag.
I've recently started using the <template> tag for HTML that I process afterwards using a template library, e.g.
<template id="tmpl">
<div class="something">
{{title}}
</div>
</template>
...
<script>
var output = Mustache.render($('#tmpl').html(), {
link: 'abc',
title: 'abc'
});
</script>
However, I've come to realise this means I have a broken link (example.com/pages/{{link}}) in my HTML. This is a concern, as various crawlers might consider it invalid (in fact, the Google Search Console reports my homepage as having a broken link).
Is it valid to use <template> this way?
Is it better to put it in something like <script type="text/template"> instead (as seen on the handlebars.js website)?
The output variable does contain the HTML we would expect, i.e., the rendered template; however, your code does not write the contents of the output variable anywhere.
Here is a working example:
<template id="tmpl">
<div class="something">
{{title}}
</div>
</template>
<span id="output"></span>
<script>
var output = Mustache.render($('#tmpl').html(), {
link: 'abc',
title: 'abc'
});
$('#output').html(output);
</script>
Google has not properly crawled the test site I setup for this. However, when I asked GoogleBot to render my version of your code it displayed the link inside the template element, i.e., *{{title}}* and the rendered template link, i.e., *abc*. Even though Google says you have a broken link in the template element, you really don't when a user views it.
One possible way to get Google to quit indicating that you have a broken link is to surround your template tags with <!--googleoff: anchor--> ...templates... <!--googleon: anchor-->. These tags stop googlebot from indexing anchor tags contained within.
Example:
<!--googleoff: anchor-->
<template id="tmpl">
<div class="something">
{{title}}
</div>
</template>
<!--googleon: anchor-->
I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.
In a Jumi script, I'm generating the following HTML:
<h3>Header title</h3>
When I view the page, Firebug indicates that the element has turned into this:
<h3>
<a _moz-rs-heading="" name="header-title">Header title</a>
</h3>
This does not appear in the page source, so it has been changed dynamically somehow. However, even if JavaScript is disabled, this will happen.
So why would I want to suppress this useful feature? Well, I reload the page content with AJAX every ten seconds or so. Content introduced by jQuery('#my_container').html(...) does not have its header tags rewritten. Thus, after ten seconds, the header tags will turn from blue to black.
My questions are:
What part of the Joomla source code is responsible for these header tag rewrites?
How can I create header tags that opt out of such rewrites?
Joomla builds header in this file:
/libraries/joomla/document/html/renderer/head.php
You can skip Joomla headers by removing following line from your template's index.php file:
<jdoc:include type="head" />