Develop Reference

Show rendered HTML inside ACE Editor

I am using ace editor with ng2-ace-editor in angular 7. I am trying to make an editor for some specific syntax. I want to recognize certain pattern before add content dynamically inside the Editor and replace with some kind of HTML. I want to display that HTML as rendered part, not as code. Currently when I add the content inside the ace is rendered as code.
I want to show as:
I am using #ViewChild to get the editor on my component
export class ViewAceEditorComponent {
#ViewChild('editor') aceComponent: AceEditorComponent;
Then, I use setTxt() method to assign the code to the editor dynamically.
this.aceComponent.setText(this.myTextWithHtmlCode);
Any ideas on how to render the HTML instead of the code?

How to use i18next to localise my website?

I have a very simple website with no backend, just pure html pages.
I need to have English/Chinese versions for this website, what I need to achieve is have a button on NavBar, when users click this button, the wording on entire website will be changed to Chinese/English.
All the examples I have seen that they are all require something like this:
localize(".nav");
So does it mean that I need to do something like this:
localize("body");
in order to get the whole website language switched?

According to the doc here is the list of supported-frameworks. As your project is a basic HTML one you should use this https://github.com/mthh/loc-i18next. When you init the module on a TAG you should me make sure there is the data-i18n="myKey" attribute with the key of string that need to be translated. So localize("body"); should translate the whole body but you must add the data-i18n attribute to each tag with a string key

Convert HTML entities inside <code> tag to display on web site?

Good day,
I'm writing some HTML/CSS code examples on a web site. I'm using the <code> element to mark out my examples.
I'm trying to:
Convert all HTML-tags inside my <code> blocks to be displayed on my web site
Make my examples beautiful with syntax highlighting and maybe even auto indent
I have tried PrismJS and Highlighter.JS but I cannot get any of them to convert the HTML tags. Are you forced to make it server side? And if so are there any PHP-examples or tools for this that works fine with any of the JS-libraries?
Thanks in advance

Well you might do a simple trick to display html and css codes without and tag
You might simply but the text inside a input within the code
Then you might simply style it and give it custom background and everything also it will be easy for the user to copy it but make sure to right the code you want to display inside the html code not on the rendered page or it will not be displayed to the users like this
<input type="text" name="html_test_code">whatever code here</input>
And then the styling of sytax might be done using js easily

Javascript style editor toolbar for any html element

I am looking for a JavaScript widget to edit font-related and border-related CSS properties of any given html element.
I imagine it would produce a toolbar like rich text editors have, except that I can could choose the element to apply the style to at the widget initialization time.
I have been looking through search engines with no success. jQuery based libraries are preferred.

Actually I dont understand completely. But;
If you want to make Javascript-Run console, check this page(look at bottom) :
http://eloquentjavascript.net/chapter8.html

Is their a way to add separate CSS and JS files for a particular part of web page

Is there any way to add separate CSS and Javascript files those work for only particular section of a page and don't affect any other part of the page?
I am attempting to add the following to my web page:
http://codecanyon.net/item/sliderjs-js-framework-for-slider-development/full_screen_preview/1617841
When I used it, the CSS and JS files affect my whole web page.
I don't want this to be happened. I want to add a slider without changing my site totally.
Is there any way to get it working without adding all of the slider's CSS and JS code to my webpage?

Its possible to do this using an iframe as a sort of sandbox. But it begs the question, what are you trying to "protect" the page from? If you have name conflicts, you're best fixing those rather than sandboxing the slider.

If you want to have JS and CSS specific to a certain part of a page, and you don't know JS and CSS, the only way is through iframes.
If you've made the CSS yourself, you can just add a prefix to apply it to on certain sections. Not like this:
p {color:pink}
instead, add a prefix, like this:
#menu p {color:pink}
#content p {color:black}
Your JS should only apply to elements based on id, unless your using something like jQuery. If you're using jQuery you can apply changes only to certain elements in the same way as CSS. eg.
Not like this:
jQuery('p').slider();
instead, add a prefix, like this:
jQuery('#content p').slider();

You can use iframes for this. Create a new page with your CSS and JS file included in it and call that page from iframe.