I have html code from my db and I'm trying to print it as {{ blog.content }}. But it renders as string and shows all the html tags etc. How can I make it to render as html?
it looks like:
<p>I am writing my blog post here to show everyone that I can do such things as this: <span style="font-weight: bold; font-family: Impact; font-size: 36px;">adsdsfadsf </span><span style="font-size: 11px; background-color: yellow;">and also like this one</span></p>
htmltags shouldn't be visible. The line above should be rendered as html. Which means bold parts example; should be bold.
1) Create Elements.php (Library or Plugin all are same)
namespace YourAppNameSpace;
use Phalcon\Config;
class Elements extends \Phalcon\Mvc\User\Plugin
{
public function decodeString($string)
{
return html_entity_decode($string);
}
}
2) Add Elements.php to the service
$di->set('element', function () {
return new YourAppNameSpace\Elements();
});
3) In Volt File Try this
{{ element.decodeString(blog.content) }}
Hope It Works.. :)
Related
My goal is to be able to display something like this:
I want to background highlight a piece of code inside a code block that already has syntax highlighting. I want to do this on a markdown file I have on Github that is hosted on Github Pages (can use kramdown markdown, html, css).
I am aware that you can have syntax highlighting inside a code block doing something like this:
```java
int foo (void) {
int i;
}
```
I am also aware that I can background highlight text inside a code block by doing something like this:
<pre><code>int foo (void) {
<span style="background-color:yellow">int i;</span>
}
</code></pre>
But how do I combine these two things?
You can use Google's code-prettify to color the code. It will colorize all code with the class prettyprint. Then you can use a <span> tag to set the background color.
pre {
background-color: #eee;
border-radius: 5px;
}
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify#master/loader/run_prettify.js"></script>
<pre>
<code class="prettyprint">
int foo (void) {
<span style="background-color:yellow">int i;</span>
}
// Yay code and it has colors
</code>
</pre>
I have text that is being saved from a textarea. I save it to the database. I now want to display this text onto another page after submit. I would like to keep the same format as the original text input.
This is what shows up on the browser after redirecting to the other page.
Im replacing br with --- or else it will create actual breaks in this text.
--- equals br
"M <---><---/> O <---/><---/>C<---/>Hub<---/>"
How do I display onto the page without the br tags? I have seen this work in other circumstances but unsure what I am doing wrong.
I have been able to use the .replace method to replace the enter's with . The only thing though, the tag is showing up in the display.
x.component.ts
getMessages() {
this._messageBoardService.getMessages().subscribe(
(data: any) => {
this.msgList = data
this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")
})
}
x.component.html
<h3>{{ msgList[0].title }}</h3>
<p> {{ msgList[0].message }}</p>
The expected output without the breakpoints is
M
O
C
Hub
Because this is how angular works. It prevents from injection "bad html".
To print html you will need to use DomSanitizer
Change your code
this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")
to
this.msgList[0].message = sanitizer.bypassSecurityTrustHtml(this.msgList[0].message.replace(/\n/g, "<br />"))
then template
<p [innerHTML]="msgList[0].message"></p>
BUT for security reason I would not do it I'd better do it with css
p.break-newline{
white-space: pre-wrap
}
add class
<p class="break-newline"> {{ msgList[0].message }}</p>
And now you dont need to modify your message in code.
If it is just for display purposes add a css property that displays your line breaks
<p class="message">{{ msgList[0].message }}</p>
.message { white-space: pre-line; }
in which case your api fetching has no operations
getMessages() {
this._messageBoardService.getMessages().subscribe(
(data: any) => {
this.msgList = data
})
}
OR
else you can do in angular is use innerHTML property
<p [innerHTML]="msgList[0].message"></p>
I have been working on this piece of code for like two days now. I am using Angular to create a web app, and I need some numbers to change color when they reach a certain value. (EXAMPLE: if num > 45 color = green else color = red) I would like to be able to pass the value of color between my typescript and HTML, but I'm having trouble with that. The color value passes to HTML just fine, but I can't put the color value into any type of style.
Here is my code. Thanks for the help!
Typescript:
colorOption=''
if(this.Classyaverage > 45){
console.log('red')
this.colorOption='#FF0000'
}
else{
console.log('green')
this.colorOption='#00FF00'
}
HTML:
<body>
<div class="pagecolor">
<div class="box">
<canvas class="offset"
id="lineChart"
width="240"
height="180"
>
</canvas>
//This is what I want...
<style>
h1{ color:{{colorOption}};}
</style>
<h1>
{{Classyaverage}}
</h1>
</div>
</div>
</body>
So is I can't import a Typescript like that, is it possible to export HTML or CSS into typescript?
Create a css class where you will apply the color:
.myColor {
color: var(--colorVariable);
}
Assign the value of the css variable from the typescript according to what you need in this way:
document.documentElement.style.setProperty( '--colorVariable', '#00FF00' );
You can modify it from any calculation or event of the application.
To achieve expected result, use ngStyle on h1 tag (https://angular.io/api/common/NgStyle)
<h1 [ngStyle]="{'color': colorOption}">
{{Classyaverage}}
</h1>
I think what you are looking for is the ngClass directive.
Here is the documentation from Angular. https://campuslabs.visualstudio.com/Student%20Assessment/_workitems/edit/59235
// .css
.red{
color: #f00;
}
.green: {
color: #0f0
}
-
// .html
<h1 [ngClass]="{'red': Classyaverage > 45, 'green': Classyaverage <= 45}"></h1>
This might be more than you need, but if you wanted to style multiple elements (such as all of a class or tag name) you could do the following.
HTML:
<h1 class="color-change">
{{Classyaverage}}
</h1>
<h2 class="color-change" *ngFor"let el of arr">
test
</h2>
TypeScript:
#ViewChildren(".color-change") private colorChange: QueryList<ElementRef>;
constructor(private renderer: Renderer2) { }
ngAfterViewInit(): void {
this.colorChange.subscribe(() =>
this.colorChange.forEach((element: ElementRef) => {
this.renderer.setStyle(
element.nativeElement,
'color',
this.colorOption
})
})
);
}
...
This would take care of multiple elements as well as asynchronous elements
I am trying to put some red, italicized text (label) on a page:
HTML
<label class="reditalic">Enter numeric values only</label>
CSS
.reditalic {
color: "red";
font-style: "italic";
}
...but it fails, with:
"Uncaught SyntaxError: Unexpected token YInfoReceiver.doXhr.xo.onfinish # sockjs-0.3.4.js:2018EventEmitter.emit # sockjs-0.3.4.js:151AbstractXHRObject._start.that.xhr.onread"
and, "Uncaught SyntaxError: Unexpected token Y"
in the Browser (Chrome) Console, and "Your application has errors. Waiting for file change." in the console when running "meteor" in the directory of the app.
I also tried this (no quotes around "italic"):
.reditalic {
color: "red";
font-style: italic;
}
...and this ("oblique" instead of "italic"):
.reditalic {
color: "red";
font-style: oblique;
}
...and this ("font-color" instead of "font"):
.reditalic {
font-color: "red";
font-style: italic;
}
...and this (no quotes around "red"):
.reditalic {
font-color: red;
font-style: italic;
}
It runs fine when I remove the HTML and the CSS shown above.
UPDATE
The problem was that the HTML was in "limbo":
</table>
</body>
<label class="reditalic">Enter numeric values only</label>
I changed it to this:
</table>
<label class="reditalic">Enter numeric values only</label>
</body>
...and the errors disappeared. It's still not displaying on the page, though, for some reason, even after saving the changes in the HTML file and refreshing the page.
Whether I use this:
color: red;
...or this:
color: "red";
...in the CSS, it makes no difference - the label does not display. For "full disclosure" here is the pertinent CSS:
.reditalic {
color: red;
font-style: italic;
}
..and HTML:
<head>
<title>Duckbilled Platypi R People 2!</title>
</head>
<body>
. . .
<label class="reditalic">Enter numeric values only</label>
</body>
What may or may not be a problem is that when I modify and save the HTML or CSS, I see this in the console:
Client modified -- refreshing
...but it never gets to the:
App running at: http://locohost:3000/
Type Control-C twice to stop.
...message...and yet it is really refreshing - I made a test change to the title, and it did change, so...???
There is no font-color attribute in css. It's just color.
The quotes around italic and red are also optional but not the source of your problem.
thanks in advance for any help you can offer. I have been digging through the various posts here on SO trying to solve a missing page break issue. I have a number of cshtml templates that are rendered using a Razor template engine to produce an RTF file. When the file is opened in Word it completely dumps the html that contains the "break" style used to make a page break. The rest of the template renders exactly as designed. I am thinking that maybe my problem is I'm not rendering out the file correctly in the first place.
Sample .cshtml file starts with:
<div style="width: 100%;" class="newpage">
<p align="center" style="text-align:center">NOTICE</p>
<table>
....middle html content....
</table>
<p class="newpage"></p>
</div>
I've tried putting the page break at the beginning and the end just to see if it made any difference and it didn't.
The razor call that gets the .cshtml file is like this:
newNotice.Body = RazorEngine.Razor.Parse(Notifications.GetTemplate(NotificationTemplate.MyTemplate2), data, NotificationTemplate.MyTemplate2.ToString());
return newNotice;
Then I render out the RTF file in the following code where the style for the page break exists:
protected void ProduceNotification(Notification notice, string title)
{
Response.Clear();
Response.Buffer = true;
Response.AddHeader("content-disposition", "attachment;filename=" + title);
Response.ContentType = "application/rtf";
EnableViewState = false;
var stringWrite = new StringWriter();
var sb = new StringBuilder();
sb.Append(#"<html>
<head>
<title></title>
<style type='text/css'>
.body {
margin: 5em;
background-color: white;
width: 100%;
height: 100%;
font-family: Calibri;
}
.spacing {
line-height: 1.5em;
}
.newpage {
mso-special-character:line-break;
page-break-before:always;
clear: both;
}
</style>
</head><body>");
sb.Append(notice.Body);
sb.Append("</body></html>");
stringWrite.WriteLine(sb);
ClearChildControlState();
Response.Write(stringWrite.ToString());
Response.End();
}
When I open up the file in Word, the page breaks are not being respected so I saved the file to .html to see what the mark up looks like and here's what I see:
In the style definition section it shows the style:
p.newpage, li.newpage, div.newpage
{mso-style-name:break;
mso-style-unhide:no;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
page-break-before:always;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
But in the document where the html should show the element with the class on it, it looks like this instead (this is in the middle of the html output):
<div>
<p align=center style='text-align:center'>NOTICE </p>
<table>
......middle html content.....
</table>
</div>
Notice that the style and class are missing from the div tag and the p tag is missing all together. What I can't figure out is, is the conversion to RTF deleting these for some reason or is it the Razor Templating Engine that's stripping out the text? I've also tried changing this to output an .doc format also but the result has been the same.
So the aggravating answer also turned out to be the simplest one. The style was applying to p, li, or div elements but only if the element has some kind of content:
<div class='newpage'> </div>
As long as I used one of the correct elements, it works as long as there is some kind of content (in this case just a space). Once I had it working, I also had to address the issue of it adding an extra blank page to the output since originally I had the line in the cshtml file itself. Instead I moved it to the code behind.
I created a var to hold the last list item, as demonstrated in this SO post here.
var lastItem = myList.Last();
foreach(var d in myList)
{
newNotice.Body += RazorEngine.Razor.Parse(Notifications.GetTemplate(NotificationTemplate.MyTemplate2), data, NotificationTemplate.MyTemplate2.ToString());
if(!ReferenceEquals(d, lastItem))
newNotice.Body += "<div class='newpage'> </div>";
}