Kramdown is now the default markdown renderer for Jekyll 4.0. I would like to know if there is a way to remove the end slash from the img tag.
For example:
<img src="flowers.jpg" alt="Flowers" />
One way until a few months ago was to using Redcarpet, but now is dropped.
How can I do?
Thanks for the support.
As said in my comment, this trailing slash is hard coded in Kramdown Html converter.
You can override this methods by creating a _plugins/my_img_tag.rb file :
module Kramdown
module Converter
class Html < Base
# Overriding method
def convert_img(el, _indent)
"<img#{html_attributes(el.attr)}>"
end
end
end
end
Note : this plugin will not work on Github pages.
You can use regular expressions for this:
The regex below catches what we want:
(<img)(.*\n*\t*\s*)(\/>)
Then, you can do a replace of the 3rd group:
$1$2>
I've tested with a few variations of the tag img:
Test using Sublime Text
Related
Is there any way to tweak how Hugo output codefences?
if I have some markdown like so:
```csharp
//some code
```
It will be generated as:
<pre class="language-csharp">
<code class="language-csharp">
//some code
Can I somehow change the pre+code output?
I'm trying to integrate Mermaid.js into my site and this fails due to having the two tags.
If it manages to hook onto the code tag, the Mermaid output is just shown as code inside the pre
And if it hooks onto the pre, then the inner text is wrong and cant be parsed.
For anyone stuck on this issue, here is how I ended up solving it.
In the template for our pages, we take the content of the markdown file.
Then find-replace language-mermaid with just mermaid.
This prevents collision with other libraries like Prism.JS.
And it allows Mermaid.JS to correctly find the proper tag and class to hook into.
<div>
{{ $content := .Content }}
//other replace hacks ....
//...
{{ $content = replace $content "language-mermaid" "mermaid" }}
{{ safeHTML $content}}
This results in generated files containing the following output.
<pre>
<code class="mermaid">
...
Ugly hack, but works. so that is good enough for us right now.
So far, 6th March 2022, it is not possible. According to the official documentation, only images, links, and headings are adjustable in this way.
However, you should be able to create your own shortcode and implement it in a way that will provide you the features you want to get and use.
[SOLVED]
My code goes from :
to this after saving:
See the code inside the return statement... It happens after doing a save... It's just so unreadable... What is causing it and how can I fix this?
You're in a .js file, so the automatic formatter VSC uses is for JavaScript, not JSX - it's choking on the <s because in JS, those are operators, not JSX tag delimiters.
Change the file name from App.js to App.jsx for the formatter to work properly.
Yeah there was a JS-CSS-HTML Formatter extension enabled which was causing all this. Disabling it solved the issue. Thanks Brian Thompson.
Any link I use in Reactjs is showing comment. I'm using VSCode Editor. I'm new to React...it can be silly...sorry for that.
I'm sharing two images here.In the tag, src="{link...}" should be shown like this. But in my case (sharing another snapshot including error) it is only consider it as comment and it is not loading any images.
This is my code image...I am stuck with it...I want my code to work like the above code in image (1) shared
Thanks in advance...
You have to use back ticks instead of single or double quotes.
So it's
<img src={`${var}`}
instead of
<img src={'${var}'}
It's a javascript feature called template string. You can find more info about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
It is happening because in src you are using single quotes ,
That's not how it should be done in React.
Use template strings which looks like this ` inside the src ,
I am trying to use text-angular but after every line changes it will auto-generate new tag for every new line.
According to their documentation, depending on the version you are using, it might be as simple as adding the taDefaultWrap-Attribute and specifying which wrapping-mode you want., e.g.:
<text-angular ng-model="htmlVariable" ta-default-wrap="div"></text-angular>
Documention can be found here: https://github.com/textAngular/textAngular/wiki/Directives
Relevant part from their website:
taDefaultWrap: The name of a HTML tag that will wrap each line by
default.
It was implemented due to a request which can be found here:
Option to disable default p wrapping
The request included the following examples which should work:
ta-default-wrap="h2"
ta-default-wrap="div"
ta-default-wrap="" <!-- no tag for new line -->
I am using angular application. I want to convert the bbcode into plain text. Is there any any plugin or library or any method for it. I am accepting following data.
$scope.Currentdata= "[justify][size=2]New testing.Hello World.[/size][/justify]";
and i want to remove the bbcode and show plain text on my div.
<div id="showdata" name="showdata"></div>
You can use the following plugin to parse :
https://github.com/DasRed/js-bbcode-parser
Use the following command:
bower install bbcode-parser --save
// use to create a clean parser
var parser = new BBCode({}, {})
// use default parser
var parser = BBCode.default
// configure the default parser with
BBCode.setCodes({});
console.log(BBCode.default.parse('This is a text[br]with HTML Break.'));
If you want to parse a string to blank text (not html), you can use JavaScript Patterns to filter out the tags.
Since all tags are basically [(/)x=y] you can remove anything between the square brackets and the brackets themselves.