I'm working on a tutorial page with Angular on which I want to show some code in: 'Java', 'TypeScript', 'C#', 'Html'. I know there is a snipped called , but that seems to be not that what I want.
For example:
My uploaded image shows a code snipped in different colors which I got from material.angular.io/components. Is there a simple way to define this code as an component in the appropriated Style in which the code should look like, like the example image, also defined in different colors?
This component from the image would be great, because of the copy button at the right. Has anybody an idea if this component already exist?
enter image description here
Using <pre> and <code> it would be possible to display code blocks with the use of innerHTML.
<pre>
<code [innerHTML]="code"></code>
</pre>
Java Code
<pre>
<code [innerHTML]="java_code"></code>
</pre>
https://stackblitz.com/edit/angular-display-code-snippets-in-html-page-e61cdd?file=src%2Fapp%2Fapp.component.html
What you probably want though, is also prettified and colored code blocks. For that there are packages available for use.
E.g ngx-highlights: https://www.npmjs.com/package/ngx-highlightjs
Demo: https://ngx-highlight.netlify.app/
Related
I am creating a site with custom components where I need to display the Html and Razor code snippets for the components so they can be copied by others.
For example if the component in the view is the following:
<div class="k-content">
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Value("05/12/2018")
)
</div>
I want to be able to display exactly how it is coded in the view, so the view would look the same. That way someone can see the code, and copy and paste it on the view.
I have tried using pre tags but that does not work. The only way I was able to do it was to use a tool to encode the < tags and > tags. See below:
<pre>
<div class="k-content">
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Value("05/12/2018"))
</div>
</pre>
Is there a better way to do this? Is there an elegant solution?
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 am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.
I'm trying to remove auto-adding of <p> tag in CQ5(Version 5.6.0.20130125). I've tried to add these properties to the text component I'm using but with no effect.(source)
removeSingleParagraphContainer true
singeParagraphContainerReplacement (empty string)
I've also tried this solution. Again, no effect.
Is it possible to disable auto-adding of <p> tag?
Thanks for any ideas
EDIT I've tried this answer but CQ still adds <p> tags to my code. For example, I have this HTML code
<strong>Headquarters:</strong>
<p>MY - COMPANY a.s.<br>
Random Street 77<br>
Random City</p>
and after I submit it, the code changes to
<p><strong>Headquarters:</strong></p>
<p>MY - COMPANY a.s.<br>
Random Street 77<br>
Random City</p>
my RTE looks like this
<text jcr:primaryType="cq:widget"
hideLabel="{Boolean}true"
name="./text"
xtype="richtext">
<htmlRules jcr:primaryType="nt:unstructured">
<docType jcr:primaryType="nt:unstructured">
...
</docType>
<blockHandling
jcr:primaryType="nt:unstructured"
removeSingleParagraphContainer="{Boolean}true"/>
</htmlRules>
</text>
EDIT2 this is what my hierarchy looks like
You can keep the RTE from surrounding your text with <p> tags by setting the removeSingleParagraphContainer property to true as long as you only create one paragraph.
With Chrome on Mac OS X (at least), holding shift while pressing enter inserts line breaks instead of paragraph breaks so you can still create text with multiple lines. Since you said in your last question that you're using the misctools plugin, you can use the source edit view to peek at the markup as you go.
Finally, to set the removeSingleParagraphContainer property, you'll need to create another child called blockHandling under your htmlRules node in your dialog. You don't need to mess with singeParagraphContainerReplacement property, but if you did, you would set it on the same node:
<rtePlugins jcr:primaryType="nt:unstructured">
...
</rtePlugins>
<htmlRules jcr:primaryType="nt:unstructured">
<docType jcr:primaryType="nt:unstructured">
...
</docType>
<blockHandling
jcr:primaryType="nt:unstructured"
removeSingleParagraphContainer="{Boolean}true"/>
</htmlRules>
Edit regarding your edit: using the source edit feature of the misctools plugin and pasting this exact text saves and loads without p tags for me in Chrome on Mac OS X:
<strong>Headquarters:</strong><br>
MY - COMPANY a.s.<br>
Random Street 77<br>
Random City
Are you sure your dialog.xml deployed properly? Maybe double-check that your component's dialog hierarchy looks how you'd expect it to in CRXDE Lite:
The property removeSingleParagraphContainer should be added in node with xtype is richtext.
Example:
<text jcr:primaryType="cq:Widget"
hideLabel="{Boolean}true"
name="./text"
height="{Long}520"
removeSingleParagraphContainer="{Boolean}true"
xtype="richtext">
CRXDE Lite: configuration in crxde lite
Note: And this configuration is only used for single paragraph.
Refer: more info about removeSingleParagraphContainer
Try using #context='html' in your code. This lets you set the context of the text as html so even if there are tags in your dialog value, they will be rendered as equivalent html and not as tag on the page.
eg :
{properties.something #context='html'}
For Touch UI, you can also create a custom paraformat option in the AEM Touch UI, cq/gui/components/authoring/dialog/richtext, and then using Java Backend, Sling Model, to text-transform the output, so that your Sightly HTL can render the output Html as expected. For the full tutorial, you can find it here.
https://sourcedcode.com/blog/aem/aem-richtext-remove-p-tag-removesingleparagraphcontainer-for-touch-ui
Try using #context='unsafe' in your code. You should be able to get rid of the unnecessary HTML tags, worked for me
What tag can I use to prevent any interpretation? I need that because I need to write down some source code and it's result in blogger. I have this code in blogspot, but the code inside the <pre> is processed
The code is as follows:
<pre class='prettyprint'>
$latex \displaystyle S(n)=\sum_{k=1}^{n}{\frac{1}{T_{k}}=\sum_{k=1}^{n}{\frac{6}{k(k+1)(k+2)}$
</pre>
This is the result:
$latex \displaystyle S(n)=\sum_{k=1}^{n}{\frac{1}{T_{k}}=\sum_{k=1}^{n}{\frac{6}{k(k+1)(k+2)}$
When I can replace '$' in <pre> with something equivalent, I could avoid this issue.
I tried <code> and <pre>, but they all interpret the content.
ADDED
I'm trying to use the javascript code found in this post.
If I understand correctly, you are using Replacemath, and its documentation says: “Should you need to to prevent certain $ signs from triggering LaTeX rendering, replace $ with the equivalent HTML <span>$</span> or $, or put the code inside a <pre> or <code> block if appropriate.” Of these, the first method seems to actually work.
That is, replace all occurrences of “$” inside the pre element by <span>$</span>.
I tested this by publishing a test in my blog (which had been dormant for 6 years...). I had to manually break the pre block to fit into the column.