In my Django project, I am using markdownify to convert my markdown to HTML.
I have a problem while rendering the HTML content to my template.
some tags like <em>, <strong> are not getting reflected.
I have tried using the safe filter as suggested in this stackoverflow post but I find no changes!
Is there any other filter I can use or any method to render correctly
in settings.py
MARKDOWNIFY = {
"default": {
"STRIP": True,
"BLEACH": True,
"MARKDOWNIFY_LINKIFY_TEXT": True,
"WHITELIST_TAGS": [
'a',
'abbr',
'acronym',
'b',
'blockquote',
'em',
'i',
'li',
'ol',
'p',
'strong',
'ul'
],
"WHITELIST_ATTRS": [
'href',
'src',
'alt',
],
"WHITELIST_STYLES": [
'color',
'font-weight',
],
"LINKIFY_TEXT": {
"PARSE_URLS": True,
"PARSE_EMAIL": True,
"CALLBACKS": [],
"SKIP_TAGS": ['pre', 'code',],
},
"WHITELIST_PROTOCOLS": [
'http',
'https',
],
"MARKDOWN_EXTENSIONS": [
'markdown.extensions.fenced_code',
'markdown.extensions.extra',
]
},
}
in my template:
<div class="col-8">
{{ entry|markdownify|safe }}
</div>
the content:
#This is the H1 tag for Heading
but these are working
- paragraph
- all the headers
- list tag
things not getting converted
- *Italics not working*
- **And also bold text**
In my template,this is what i get
This is the H1 tag for Heading
but these are working
paragraph
all the headers
list tag
things not getting converted
<em>Italics not working</em>
<strong>And also bold text</strong>
Images for reference:
content to be markdowned
final outcome that I got
Related
I am using Markdown file to generate pages for gatby. In order to control the style of pictures, I use html syntax. However, the page generated by gatsby does not display the html part.
This is my markdown file:
---
......frontmatter......
---
......content......
<table>
<tr>
<td><img src="./images/2018/zotero/ZoteroWebDAV.png"></td>
<td><img src="./images/2018/zotero/ZoteroExts.png" width=100%></td>
</tr>
</table>
......content......
Everything else is rendered normally, however, neither the table nor the pictures in it are displayed. Here is my gatsby-config.js.
{
resolve: `gatsby-transformer-remark`,
options: {
excerpt_separator: `<!-- endexcerpt -->`,
plugins: [
// 'gatsby-remark-relative-images',
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200,
},
},
{
resolve: `gatsby-remark-image-attributes`,
options: {
dataAttributes: true
}
},
],
},
},
What can I do to make the html part in Markdown render normally?
You can use as well the built-in dangerouslySetInnerHtml property or any markdown parser like markdown-to-jsx.
Using the first approach, following Gatsby's guides:
import React from "react"
import { graphql } from "gatsby"
export default function Template({data}) {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html } = markdownRemark
return (
<div className="blog-post-container">
<div className="blog-post">
<h1>{frontmatter.title}</h1>
<h2>{frontmatter.date}</h2>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
</div>
)
}
export const pageQuery = graphql`
query($id: String!) {
markdownRemark(id: { eq: $id }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
}
}
}
`
Because you haven't shared your query I've used the one in the guide but tweak it as you wish. As you can see, everything that is in the end of the frontmatter is html:
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
Using the second approach, and following the previous query structure, the html should be rendered as:
import Markdown from 'markdown-to-jsx';
import React from 'react';
<Markdown>{html}</Markdown>
If there's any hindrance I'd say that the second approach is better because, as the dangerouslySetInnerHTML name suggests, you are potentially exposing your site to XSS (Cross-Site Scripting), while the second approach sanitizes the implementation.
hopefully someone there who can guide me on rite way. trying to create dynamic html with dynamic control. here is my example.
const [oHtml, setoHtml] = React.useState([
{
type: "html",
control: "<table><tr><td>",
},
{
type: "control",
control: (
<CustomInput
labelText="Password"
id="password"
formControlProps={{
fullWidth: true,
}}
inputProps={{
type: "password",
autoComplete: "off",
}}
/>
),
},
{
type: "html",
control: "</td></tr></table>",
},
]);
and here how i am rendering.
return (
<div>
{Object.keys(oHtml).map(function (keyName, keyIndex) {
if (oHtml[keyName].type === "html") {
console.log(oHtml[keyName].control);
return ReactHtmlParser(oHtml[keyName].control);
} else {
return oHtml[keyName].control;
}
})}
</div>
);
issue is when React run <table><tr><td> its auto fixing tag and making it <table><tr><td></td></tr></table>
what i want to control inside td.
is there any way i can disable react to add missing tags itself?
The thing is that ReactHtmlParser can't be used to parse partial html.
You can try
return ReactHtmlParser(
oHtml.map(v => v.control).join("")
)
Btw, your oHtml is an array, so no need for Object.keys.
I'm learning to use and develop some custom blocks in gutenberg.
I was wondering and trying to add my custom section tag block, but then i looked up to the group core block code.
<SelectControl
label={ __( 'HTML element' ) }
options={ [
{ label: __( 'Default (<div>)' ), value: 'div' },
{ label: '<header>', value: 'header' },
{ label: '<main>', value: 'main' },
{ label: '<section>', value: 'section' },
{ label: '<article>', value: 'article' },
{ label: '<aside>', value: 'aside' },
{ label: '<footer>', value: 'footer' },
] }
value={ TagName }
onChange={ ( value ) =>
setAttributes( { tagName: value } )
}
/>
Am i right thinking this means ther should be a select that allow you to choose the tag?
Also i tried modifing the code in the editor from
<!-- wp:group {className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-group is-style-twentytwentyone-border"><div class="wp-block-group__inner-container"></div></div>
<!-- /wp:group -->
to
<!-- wp:group {"tagName":"section","className":"is-style-twentytwentyone-border"} -->
<section class="wp-block-group is-style-twentytwentyone-border"><div class="wp-block-group__inner-container"></div></section>
<!-- /wp:group -->
And it works! It doesn't break the block and it's rendered correctly on the frontpage with a section tag.
Am i missing something? Is there a way to make the selection tag appear in the editor? I'd like my user to be able to choose the tag without editing the code manually
Actually i was looking at the testing version of gutenberg, and i works as expected by the code, not the one shipped with wordpress.
Still there are various way to add a filter to the group, letting the user choose the tag, but it's something that involves some coding. Better build a new block from scratch.
Introdution
Hi, I'm working on private project "Avatar databse" in Vue.js framework. App shows them based on data() elements:
data() {
return {
avatars: [
{
name: "Butterfly Blue",
tags: [
"animal",
"butterfly",
"blue"
]
},
{
name: "Butterfly Green",
tags: [
"animal",
"butterfly",
"green"
]
},
{
name: "Deer Shining",
tags: [
"animal",
"deer"
]
},
What I want
I would like to make search engine based on tags. Most of help pages are about previous Vue versions or search is based on name - one element. I want to search in tag list not single name string.
Without search engine, every avatar renders correctly
Current component code
template:
<div class="row">
<div v-for="image in avatars" :key="filteredData" class="col-6 col-sm-4 col-md-3 col-lg-2 my-2">
<img v-bind:src="imgSource(image.name)" v-bind:alt="image.name" class="img-fluid" :class="avatarClass" />
<a :href="imgSource(image.name)" :class="downloadClass"><span class="icon-download-alt"></span></a>
<p class="h5 text-center py-1">{{ image.name }}</p>
<p v-for="tag in image.tags" v-bind:key="tag" :class="tagClass">{{ tag }}</p>
</div>
</div>
computed()
avatarClass() {
return 'avatar';
},
tagClass() {
return 'tag';
},
downloadClass() {
return 'download';
},
filteredData() {
if (this.search == '') {
return this.avatars;
} else {
return this.avatars.filter(obj => {
return obj.name.toLowerCase().includes(this.search.toLowerCase());
});
};
},
Of course filterind related thigs doesn't work. And there's my question...
How to make working, tag list based, search engine?
(Based on my project.)
It's small changes to the search that has been done. I've made a codesandbox where it's working:
https://codesandbox.io/s/festive-napier-3jk52
filteredData() {
if (this.search == "") {
return this.avatars;
} else {
return this.avatars.filter(obj => {
return obj.tags.indexOf(this.search.toLowerCase()) !== -1;
});
}
}
It's pretty simple. There's a search data variable, where you can put in the tag you want to search for. Right now it only searched for the whole tag, and has to match a tag fully, but this can be changed if you want people to be able to search for "anim", and then the avatars with the "animal" tag should be shown.
You enter butterfly in your search field and only Butterfly Blue and Butterlfy Green should appear?
Instead of
return this.avatars.filter(obj => {
return obj.name.toLowerCase().includes(this.search.toLowerCase());
});
try this:
return this.avatars.filter(avatar => avatar.tags.includes(this.search.toLowerCase()));
I'm using Yii2 Redactor box, extension from: https://github.com/yiidoc/yii2-redactor
I want to change size of the textarea but I don't know how, it not mention in their document. I've tried to edit their css but it didn't work.
Please help me with this. Thank you
Here's the way you can control the height of the text area:
echo $form->field($curriculum,'text')->widget(Widget::className(),[
'settings' => [
'lang' => 'en',
'minHeight' => 500,
'plugins' => [
'fullscreen', 'fontfamily','fontcolor','fontsize','imagemanager',
],
'buttons' => [
'formatting', '|', 'bold', 'italic', 'deleted', '|',
'unorderedlist', 'orderedlist', 'outdent', 'indent', '|',
'image', 'table', 'link', '|',
'alignment', '|', 'horizontalrule',
'|', 'underline', '|', 'alignleft', 'aligncenter', 'alignright', 'justify'
],
'imageUpload'=>\Yii::$app->urlManager->createUrl('program/uploadcurriculumart'),
'clipboardUpload'=>true,
'clipboardUploadUrl'=>\Yii::$app->urlManager->createUrl('program/uploadcurriculumart'),
'imageManagerJson'=>\Yii::$app->urlManager->createUrl('program/getallcurriculumart')
]
],['style' => 'height:500px;'])->label(false);
Notice the two arguments: minHeight and also I set the style for the control to have a height of 500px; Works perfectly.