I'm trying to create a "clickable" image in AsciiDoc lightweight markup language with Asciidoctor.
I tried the following (not working):
image::<url1>[<url2>[]]
For example:
image::https://img.shields.io/badge/License-Apache%202.0-blue.svg[http://www.apache.org/licenses/LICENSE-2.0[]]
It should become roughly the following html:
<img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg">
How can I accomplish this in AsciiDoc without passing through raw HTML?
block:
image::https://img.shields.io/badge/License-Apache%202.0-blue.svg[link="http://www.apache.org/licenses/LICENSE-2.0"]
inline:
image:https://img.shields.io/badge/License-Apache%202.0-blue.svg[link="http://www.apache.org/licenses/LICENSE-2.0"]
Notice the link attribute on the image.
Related
consider that I have several HTML templates and they have custom HTML tags. For ex: c-icon, c-text, c-button etc.
For some usecase(Display other content along with innerHTML), I need to access c-icon tag HTML inside c-text and append it to some text so that I can render it with some other html text. In future, I may have another component called c-badge and even I want to refer and render.
Could you please provide any suggestions for achieving the same?
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/
So I am building my first data blog with RStudio and Blogdown and I am seriously stuck on something small but infuriating.
https://data-issues.netlify.app/
Above is the site I am building. I made a logo for it but I would like to make this centered. How would I do so in my markdown (.md) file.
Code here:
---
# Homepage
type: widget_page
# Homepage is headless, other widget pages are not.
headless: true
weight: 1
design:
columns: "1"
---
{{< figure src=/datavision.png theme="light" class="center">}}
EDIT: added this too to no avail
<p align="center">
</p>
I am using .md files, so where exactly would I define the shortcode for p if not here?
As #YihuiXie said in the comment section below, you don't really need to use a shortcode for raw HTML, there are multiple solutions that you can use.
Edit your config to use raw HTML in Markdown
In your config.toml enter:
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
If you have in your project config.yaml use this:
markup:
goldmark:
renderer:
unsafe: true
This enables raw html support in markdown files, in this way you don't need to use shortcodes.
https://gohugo.io/news/0.60.0-relnotes/
Raw HTML using Shortcodes
Depending how your project is structured, there should be some kind of layouts folder. I have a project made with Hugo and I have a something like this ../layouts/shortcodes/rawhtml.html with this code:
{{.Inner}}
For example in your code you're already using a Hugo’s Built-in shortcode. After you create the file, you just need to insert your shortcode in this way in your Markdown:
{{< rawhtml >}}
<img src=/datavision.png class="center">
{{< /rawhtml >}}
The custom CSS code should be defined in ../static/css/, in your config.toml, simply check if there is a variable to set your custom CSS code, for example:
# Custom CSS
customCSS = ["/css/custom.css"]
I used this configuration because the theme required it, but it can be different in your project so keep this in mind. If you don't want to use another file to save your CSS code, you can simply insert it into your shortcode like I did with the HTML, for example:
{{< rawhtml >}}
<style>
.center{
/* your code here */
}
</style>
{{< /rawhtml >}}
Use HTML for content pages instead of Markdown
With Hugo, you could also use a HTML instead of a md file in your project. It simply follows the same syntax, but you have to use HTML instead of the Markdown syntax, for example:
---
title: "Contact me"
---
<p>
Some text here
</p>
In this case you don't need the shortcode from the moment you're already using a HTML.
I am using PDFReactor to generate pdfs. What is the best way to structure top of pdf using #top-left and #top-right with complex html tags like <a> tag instead of simple raw text like #top-right{content: "some text"}?
Use running() and element(). See https://www.w3.org/TR/css-gcpm-3/#running-elements.
Is there a ('newbie-simple') way to embed an image inside html, however not in the inline form as usual:
<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" />
but in a form where the base64 code is placed on the end of the html file?
A possible benefit of this method would be that an image can be inserted in the page on more than one place using the same image data from the bottom of the html file.
TL;DR: With pure HTML/CSS - unfortunately no.
I need that too for Sciter Notes project to save notes (plain HTML files) with embedded images.
Ideally you should be able to do something like this:
<img src="cid:1234" />
...
<data id=1234 type="image/png" base64>
iVBORw0KGgoAAAA...
</data>
but unfortunately no such mechanism yet.
But you can implement schema explained above with script though.
If you are using HTML5, then you do not have to worry about caches. The browser will load all images and store them into an image-list, therefore the image will be loaded only once and reused at every place the key (the URL to the source image) is found.
The only thing you will have to do, if you are only using HTML, is to copy the URL of the image into every place you need to use it. This is necessary, because you cannot declare variables in HTML and hence cannot change them from another place in the document. For this purpose you would need additionally javascript for example.
Then you can go ahead with CSS to adjust the pictures to your requirements. Yu can either define classes in the header and let the img tags have these classes, or you can type the style properties inline or you can import an external CSS-file.
EDIT:
An example with javascript would be to add this code in
<body>
<img id="img" src="myIMG.jpg">
<script type="text/javascript">
function changeImage(id, src) {
document.getElementById(id).src=a;
}
</script>
</body>
Here the function changeImage is declared now. You can call this function either via onclick or inside of the script tag. You can address the correct image through its ID as first parameter (you will have to give every image its ID, don't confuse it with the image-list of your browser, here you define the ID in the img-tag) and the new source url as second parameter.