I'm writing a documentation with angular.
For now, i duplicate twice the code. Once in the button.component.html to make the componenbt appear, and the other is injected from the button.component.ts as a string so it's not interpreted.
The goal is to show the result you will get if you tips the code contain in pre balise.
I need to avoid these duplication cause when a component change, i need to modify twice the code.
I first have use to simulate include comportement but it's not working as the final content is the generated content and not the original content.
Then i checked how angular material perform for their documentation, and it's same to be a bit tricky and complicated for me has they inject their component as dependancies.
I'm asking if there is a sample way to avoid this duplication content and if someone have faced the same issue.
I have only one idea, it's to run a shell commande in the end of ng build with webpack and node, and get the content of the target block and inject directely in the target balise.
Sample :
<div class="my-5" data-source="myButton">
<button mat-button>
<mat-icon class="icon-left">help</mat-icon>
Support center
</button>
</div>
<code data-target="myButton"></code>
But i'm not very sur about that solution.
Thanks in advance.
Kevin
For people who have face the same problem, there is the module you have to use :
exemplify-angular
It's do the job perfectly.
Kevin
Related
guys
I'm building the web based code editor for my personal project.I want to make it work like VS code but facing some issues.
I'm using ACE editor.
This is what I get while trying with autocompletion.
I'm getting all the available suggestions while trying to write "os.(something)", rather then just getting the language and package specific suggestions.
What I want is this.
In this pic as you can see I'm getting suggetion related to os package only.
Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page. You need to write this simple script to working with the auto completion feature.
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
enableBasicAutocompletion: true
});
Demo: https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html
Reference: https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
HTML, JS, CSS Based
Create <textarea onkeyup=compile() id=code>. It should be big enaugt for code.
Create <script> </script>
Build the autocomplete
Script: function compile() { document.GetElementById('code').value = document.GetElementById('code').value.replaceAll('snippet1', 'Snippet1Value').replaceAll('snippet2', 'SnippetValue'). ...
E.g.: When you enter _text_ (and you set snippet1 to <input type=text>) then your textarea will write <input type=text>. To create an picker, use a contextmenu-library at json.
I know, this is only an plan how to do is.
Problem
I have a project fully documented and with a README which has the logo centered:
https://github.com/Fl4m3Ph03n1x/fs-error-logger/blob/master/README.md
The code I am using for this is the following:
<p align="center">
<img src="./logos/logo_no_wm.png" >
</p>
After reading NPMs documentation, I had the strong impression this same code should work on NPM's markdown:
https://github.com/npm/marky-markdown/pull/242
However, if you check my NPM project, you can see the logo is not centered:
https://www.npmjs.com/package/fs-error-logger
Question
How do I fix this?
This could be a bug or an intentional decision by the developers. I suggest filing a bug report.
A view of the page's source code reveals the following HTML for that image:
<img src="https://raw.githubusercontent.com/Fl4m3Ph03n1x/fs-error-logger/HEAD/logos/logo_no_wm.png" />
<p></p>
There are a couple things to note there. First, the image is not wrapped in a p tag, which is weird. Second, there is an empty p element immediately following. This could be a bug in their system, or an artifact of their HTML sanitation.
According to an HTML comment in the HTML source, marky-markdown is the markdown parser used. That project's documentation states in part:
What it does
Parses markdown with markdown-it, a fast and commonmark-compliant parser.
Removes broken and malicious user input with sanitize-html
It then continues with a bunch of other post-processing steps. I checked and markdown-it passes the raw HTML through just fine, so presumably one of the post-processors is altering the output in some way. Or possibly, marky-markdown's modification of the markdown-it parser has broken something.
What I don't know is if this was an intentional decision by the marky-markdown developers or a bug. If it was intentional, then you may not ever be able to get your desired behavior. Either way, filing a bug report is the best way to get any answer.
EDIT
For future reference, and for anyone else encountering this problem, the bug report is here. The response is that this is in fact a bug and a fix is already pending.
I'm trying to create some scripts which require moving through a lot of on-the-fly HTML with random IDs. They require getting the parents of an element - but I'm not sure how to implement this in WebdriverJS.
If I access the element I want via a console, I can do the following to get it;
document.querySelector('span[email="noreply#example.com"]').parentNode.parentNode
Is there a way to do this in WDJS? I've looked and can't see anything obvious - it's specifically the parent stuff I'm having issue with. I saw that a possible solution may be xPath however I'm unsure of syntax having never used it before.
Thanks in advance!
I don't know the syntax of WebDriverJS. But the XPath is as below, you need a way to fit it in somewhere.
This is based on your CSS Selector, so please show HTML if needed.
.//span[#email='noreply#example.com']/../..
For example, if you have HTML like this
<div>
<div>
<span email="noreply#example.com">Contact me</span>
</div>
</div>
You can avoid using .. to go up.
.//div[./div/span[#email='noreply#example.com']]
If you have more levels to look up, another handy method would be using ancestor from XPath Axes.
Also, as #sircapsalot brought up, CSS selectors spec doesn't support parent selecting, so XPath is the only way to go, unless you inject JS.
I use LifeRay 6.1.2. And it have built-in Alloy UI 1.5. framework. So I try to reproduce this form validation example (I copied all code), but it don't work as expected (error labels in DOM, but they are don't visible in form (see EDIT1)):
Expected result is (you can try yourself live example using link provided above):
Where is problem? How to solve it? Thanks.
EDIT1:
After some research, I realized that if I delete aui-form-validator-message CSS class from error message's DIV tag (it generated by LifeRay, I'm not adding it), then error message become visible. Strange..
You should post your own code, or it's difficult to answer.
Anyway if you want you could try the aui validator tag for example:
<aui:input name="name" value="${name}" label="name">
<aui:validator name="required" errorMessage="your-message-here"></aui:validator>
</aui:input>
learn more # http://drewblessing.com/blog/-/blogs/34509
Hope it helps!
I think you have not used the tag in your code.
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
Paste this and check.
I'm trying to help my daughter-in-law with her Tumblr blog. When she tries to add an audio link she gets the following...
You are using a custom theme that doesn't include the code for Tumblr's new audio player.
You can either switch to a preset theme or add the new audio code to your custom theme's HTML (for advanced users).
I have created a blog with a preset theme and and compared the code to hers and see that it is very much different. So much so that I am not sure what to change.
I was able to get the above message to go away by replacing the block:Audio block in the div class="post" div with the following...
{block:Audio}
<section class="top audio">
{AudioPlayerBlack}
</section>
{/block:Audio}
There is a lot of other audio references in the preset theme, but I am not sure where to put it or what is needed.
Is there more I need to do. I am waiting for her to test it, but in the mean time can someone point me to instructions of the proper way to do this, or help me out otherwise?
Thanks,
John
I was able to to test it and it works fine.
For anyone with the same problem, you can simply copy the block:audio code in my question and replace the block:audio code in your custom themed blog.
John