I try to setup mermaid in a Jekyll page. In Jekyll I am using the theme Just the Docs.
Basically I followed this post to add mermaid in my page template. And it results in:
Diagram I used is:
<div class="mermaid">
graph TD
A[Client] -->|tcp_123| B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</div>
I also tried with ```mermaid but that simply does not render a diagram at all. Additionally, I tried other versions of Mermaid and other examples from mermaid webpage without success.
What is wrong with my setup here?
I believe you require properly placed line breaks for Mermaid to correctly interpret and render the diagram. Using the Mermaid Live Editor I was only able to render your diagram with the following use of link breaks. However, it's not clear to me exactly how you accomplish that in what seems to be your HTML (div tag). Perhaps you simply break the lines, as the tutorial to which you've linked seems to show.
graph TD
A[Client] -->|tcp_123| B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
You have to add
markdown="0"
attribute to div, if you check the rendered code it adds additional paragraphs, that results in the mentioned problem. This helped in my case.
<div class="mermaid" markdown="0" >
graph TD
A[Client] -->|tcp_123| B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</div>
Related
I'm working on a tutorial page with Angular on which I want to show some code in: 'Java', 'TypeScript', 'C#', 'Html'. I know there is a snipped called , but that seems to be not that what I want.
For example:
My uploaded image shows a code snipped in different colors which I got from material.angular.io/components. Is there a simple way to define this code as an component in the appropriated Style in which the code should look like, like the example image, also defined in different colors?
This component from the image would be great, because of the copy button at the right. Has anybody an idea if this component already exist?
enter image description here
Using <pre> and <code> it would be possible to display code blocks with the use of innerHTML.
<pre>
<code [innerHTML]="code"></code>
</pre>
Java Code
<pre>
<code [innerHTML]="java_code"></code>
</pre>
https://stackblitz.com/edit/angular-display-code-snippets-in-html-page-e61cdd?file=src%2Fapp%2Fapp.component.html
What you probably want though, is also prettified and colored code blocks. For that there are packages available for use.
E.g ngx-highlights: https://www.npmjs.com/package/ngx-highlightjs
Demo: https://ngx-highlight.netlify.app/
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'm trying to remove auto-adding of <p> tag in CQ5(Version 5.6.0.20130125). I've tried to add these properties to the text component I'm using but with no effect.(source)
removeSingleParagraphContainer true
singeParagraphContainerReplacement (empty string)
I've also tried this solution. Again, no effect.
Is it possible to disable auto-adding of <p> tag?
Thanks for any ideas
EDIT I've tried this answer but CQ still adds <p> tags to my code. For example, I have this HTML code
<strong>Headquarters:</strong>
<p>MY - COMPANY a.s.<br>
Random Street 77<br>
Random City</p>
and after I submit it, the code changes to
<p><strong>Headquarters:</strong></p>
<p>MY - COMPANY a.s.<br>
Random Street 77<br>
Random City</p>
my RTE looks like this
<text jcr:primaryType="cq:widget"
hideLabel="{Boolean}true"
name="./text"
xtype="richtext">
<htmlRules jcr:primaryType="nt:unstructured">
<docType jcr:primaryType="nt:unstructured">
...
</docType>
<blockHandling
jcr:primaryType="nt:unstructured"
removeSingleParagraphContainer="{Boolean}true"/>
</htmlRules>
</text>
EDIT2 this is what my hierarchy looks like
You can keep the RTE from surrounding your text with <p> tags by setting the removeSingleParagraphContainer property to true as long as you only create one paragraph.
With Chrome on Mac OS X (at least), holding shift while pressing enter inserts line breaks instead of paragraph breaks so you can still create text with multiple lines. Since you said in your last question that you're using the misctools plugin, you can use the source edit view to peek at the markup as you go.
Finally, to set the removeSingleParagraphContainer property, you'll need to create another child called blockHandling under your htmlRules node in your dialog. You don't need to mess with singeParagraphContainerReplacement property, but if you did, you would set it on the same node:
<rtePlugins jcr:primaryType="nt:unstructured">
...
</rtePlugins>
<htmlRules jcr:primaryType="nt:unstructured">
<docType jcr:primaryType="nt:unstructured">
...
</docType>
<blockHandling
jcr:primaryType="nt:unstructured"
removeSingleParagraphContainer="{Boolean}true"/>
</htmlRules>
Edit regarding your edit: using the source edit feature of the misctools plugin and pasting this exact text saves and loads without p tags for me in Chrome on Mac OS X:
<strong>Headquarters:</strong><br>
MY - COMPANY a.s.<br>
Random Street 77<br>
Random City
Are you sure your dialog.xml deployed properly? Maybe double-check that your component's dialog hierarchy looks how you'd expect it to in CRXDE Lite:
The property removeSingleParagraphContainer should be added in node with xtype is richtext.
Example:
<text jcr:primaryType="cq:Widget"
hideLabel="{Boolean}true"
name="./text"
height="{Long}520"
removeSingleParagraphContainer="{Boolean}true"
xtype="richtext">
CRXDE Lite: configuration in crxde lite
Note: And this configuration is only used for single paragraph.
Refer: more info about removeSingleParagraphContainer
Try using #context='html' in your code. This lets you set the context of the text as html so even if there are tags in your dialog value, they will be rendered as equivalent html and not as tag on the page.
eg :
{properties.something #context='html'}
For Touch UI, you can also create a custom paraformat option in the AEM Touch UI, cq/gui/components/authoring/dialog/richtext, and then using Java Backend, Sling Model, to text-transform the output, so that your Sightly HTL can render the output Html as expected. For the full tutorial, you can find it here.
https://sourcedcode.com/blog/aem/aem-richtext-remove-p-tag-removesingleparagraphcontainer-for-touch-ui
Try using #context='unsafe' in your code. You should be able to get rid of the unnecessary HTML tags, worked for me
Is it possible to define indentable and collapsable blocks of text or code (e.g. formatted with Syntax Highlight Geshi) in MediaWiki?
I have seen collapsable tables and lists in Wikipedia, and would like to apply the same concept to paragraphs and code snippets.
Thanks!
Yes, you will need to have ToggleDisplay and SyntaxHighlight GeSHi installed.
Then on your page add code like this (example for C++):
<toggledisplay showtext="this is the show text">
<syntaxhighlight lang="cpp">
<Put the code here>
</syntaxhighlight>
</toggledisplay>
(See also: Wikis and Wikipedia)
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.