I am having a hard time figuring out how to do this...
I am essentially saving a huge blog post in a property called "Body" in a class called "Post". In body I will have various things like
<p> Hello world </p>
<p> Some random paragraph </p>
<codeblock> Here is an example of a basic HTML page
<html>
<body>
<h1> Hello Guys ! </h1>
</body>
</html>
</codeblock>
Then I want to have a code block and thus I want the HTML/CSS/Javascript/etc to just be parsed to the page as HTML encoded/decoded so I literally want the tags and angle brackets to show up on the page instead of being parsed as whatever they are.
I also have a HTML tag called which is ended by . It's nothing special it just indents and adds some specific CSS with it. I want the markup before the and after the tag to render the HTML tags as necessary.
Currently I am literally outputting the contents of the Body property using
#Html.Raw(post.Body)
Nothing special when I save it to the DB:
#Html.TextAreaFor(model => model.Body)
So for those that are still having this issue, this is how I resolved it.
1) I included prettyprint. See link below
https://google-code-prettify.googlecode.com/svn/trunk/README.html
2) When editing a post I just add the following code
//Bunch of code
Example:
var http = require("http");
var server = http.createServer(function(req, res){
console.log(req.url);
resp.write("<html><body>" + req.url + "</html></body>");
resp.end();
});
server.listen(3000);
</pre>
In my Razor View I have the following code:
<div class="blog margin-bottom-40" onload="prettyPrint()">
//Bunch of other code up here for my view
<div class="blogpost">
#Html.Raw(post.Body)
</div>
</div>
My blog is www.techiejs.com
Feel free to have a look and if you need another file from my solution let me know. Currently my git repository is private.
Related
var bannerText = stringFormat("This is my {0}test content{1} here", "<b>", "</b>");
<div>
<p> {para1}</p>
<p> {bannerText}</p>
</div>
html tags gets printed instead of applying them as text
Observed output
This is my <b>test content</b> here
Needed output
This is my test content here
<div [innerHTML]="bannerText"></div>
However, keep in mind Angular's docs about security, which says Angular recognizes the value as unsafe and automatically sanitizes it, which removes the <script> tag but keeps safe content such as the <b> element..
check the below code it might help you.use innerHtml
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
<div id="name"></div>
.
Observed output This is my <u>test content</u> here
Whatever method you are using is escaping the html e.g. < / > etc.
Fix
You need some version of set HTML.
e.g. React : dangerouslySetInnerHTML, Pure JS: Use innerHTML
Warning
Be careful, setting html exposes your app to XSS : https://en.wikipedia.org/wiki/Cross-site_scripting
I have a Gatsby + WP API blog setup (with Markdown enabled) and it's working great, except when I'm trying to display HTML markup as code snippets. I'm using escape characters (see below), but for some reason the HTML inside the <code>/<pre> tags is rendering as actual HTML instead of displaying as an HTML code snippet.
I understand that's what dangerouslySetInnerHTML is there to do, but I didn't think it would if I'm using the escape character <?
Here's the markup inside the WP blog post..
<pre class="language-markup"><code>
<div>
<p>Lorem ipsum...</p>
</div>
</code></pre>
And this is how I'm displaying the entire post content in the react component...
<section className="article-body" itemProp="articleBody"
dangerouslySetInnerHTML={{ __html: this.props.html }}
/>
The <div> and <p> tags rendering as HTML, instead of displayed as a code snippet..
Is there some other way I should be doing this? For the record I also tried this using a 'non-dangerously' method (react-render-html) with the same results.
-- UPDATE: --
I was able to display the HTML as a code snippet by replacing the <code> tag with <xmp>. I know this tag is no longer officially supported, and it's far from elegant, so I think I may try to separate code snippets from the rest of the content as suggested below.
I tried it in CodeSandbox, too - working as expected. If you're sure about data (escaping) received from WP API I affraid it's a Gatsby issue. There must be a place where it's modified (unescaped).
If data will be ok and you don't want to make deep ivestigation there could be workaround. Split article body and treat sections separately - texts and code snippets. The second wrap with code literal with sth like this:
const CodeBlock = (props) => {
return <section className="article-code">
<pre className="language"><code>{`${props.html}`}</code></pre>
</section>
}
Of course remove unused first and last line of original code/snippet block.
I have a JSON object that looks like the following:
id:
text: <h1>This is my text</h1> <p> I want to include HTML
and reflect those tags on the page. </p>
I'm using Angular2's HTTP_PROVIDER to read the data from the JSON.
In my HTML template, I am displaying the JSON.dataString on the webpage. How do I reflect the HTML tags on the webpage, currently the tags are displayed as plain text.
<p>{{jsonObject.text}}</p>
Is there a way to read in those HTML tags that are included in the JSON objects, and have them reflected on the webpage?
Something like:
<div [innerHTML]="jsonObject.text"></div>
Should display the text object as raw HTML. Be careful about XSS injection when you do something like this.
More detail at this question.
You may try to do it like this:
function textHtml(input) {
var el = document.createElement("textarea");
el.innerHTML = input;
return el.value;
}
And then use this function to get text with tags
I don't use Angular but do something like that.
<p id="myId"></p>
<script>
document.getElementById("myId").appendChild(jsonObject.text);
</script>
I did not test it.
I am making a forum with markdown support.
I've been using meteor's markdown parser {{#markdown}} and have found something disturbing that I can't seem to figure out.
I am using {{#markdown}}{{content}}{{/markdown}} to render the content inserted into database.
The disturbing thing, for example, if someone writes up html without inserting it into the code block in the content...
example
<div class = "col-md-12">
Content Here
</div>
This will render as a column. They could also make buttons and etc through writing the HTML for it.
How to disable this behaviour so that when HTML is written it will not render into HTML but just simply show it as text?
You can write global helper, which will strip all html tags:
function stripHTML(string){
s = string.replace(/(<([^>]+)>)/ig, '');
return s;
}
Template.registerHelper('stripHTML', stripHTML)
Usage :
{{#markdown}}{{stripHTML content}}{{/markdown}}
Test it in console:
stripHTML("<div>Inside dive</div> Text outside")
i want to insert html codes using chrome extension.
Adding complex HTML using a Chrome content script
this link works but i need to insert more specific area. For example this links add html codes to top of codes but i need to insert in specific codes like
<html>
<body>
...
...
<div>
//codes
</div>
// i want my code goes here
// <div>
// </div>
...
...
</body>
</html>
if im still can't explain myself, there is a chrome extension which name is "looper for youtube" this extension is doing what i need. Thanks for any helps, and sorry for my bad english
You have to write code in the content_script to specify where your HTML will be injected. For example, you could use the insertBefore function to insert HTML code before an existing element.
There are many functions surrounding the DOM tree which can help you specify the exact point in the document to insert new objects. Do not think about the HTML as a text file, think about it as a document tree (with parent nodes, child nodes, and ids). Here is a list of functions to get you started:
http://www.w3schools.com/jsref/dom_obj_all.asp
For example, something like:
document.getElementById('test').innerHTML = "HI!";
Will insert "HI!" inside the div tags in the following HTML:
<html>
<body>
<div id='test'>
</div>
</body>
</html>
If you require further assistance, please be more specific with your request. Where (exactly) do you need the HTML to be injected?