I can't use snippets and autocompilation when I use Ace editor in my Angular 7.X project.
When I try to config autocompile:
this.editor.getEditor().setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
});
I get an warning in console:
misspelled option "enableBasicAutocompletion"
misspelled option "enableSnippets"
misspelled option "enableLiveAutocompletion"
I use angular wrapper for Ace Editor: ng2-ace-editor.
I reproduce this error on StackBlitz:
https://stackblitz.com/edit/angular-pyt9cf?file=src%2Fapp%2Fapp.component.ts
Add import "brace/ext/language_tools" to load the language tools extension which contains the functionality for snippets.
(You may need to add brace to your package.json for this to work).
Also note that the
* {
font-family: Arial, Helvetica, sans-serif;
}
rule you use will break the editor, by assigning different font family to the elements inside the editor
Related
PrismJS syntax highlighting is broken when used together with Bulma.
Both PrismJS and Bulma use the number and tag classes. So, there is a conflict between PrismJS and Bulma.
Are there any workarounds?
There are at least 2 workarounds.
Workaround #1
PrismJS adds token class to all highlighted elements including number and tag unlike Bulma. It allows us to write a more specific CSS rule and resolve conflict with Bulma:
.token.number,
.token.tag {
all: inherit;
color: #905;
}
Just specify the correct color used in your chosen PrismJS theme.
Workaround #2
Use Custom Class Prism plugin.
It allows to prefix all Prism classes (e.g., with prism- prefix).
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/custom-class/prism-custom-class.min.js"></script>
<script>
Prism.plugins.customClass.prefix('prism-');
</script>
So number and tag become prism-number and prism-tag so the conflict with Bulma will be resolved.
But you also have to manually prefix classes in Prism CSS style-sheet, e.g.:
...
.prism-token.prism-class-name,
.prism-token.prism-function {
color: #dd4a68
}
...
I don't like this approach due to the need to manually edit Prism theme CSS file and then hosting it yourself.
Like Eugene Khyst mentioned in his answer, one way to do it is to use the Custom Class plugin for prismjs.
Instead of renaming every prism class you can selectively rename some of the classes. Which should be easier to maintain.
Prism.plugins.customClass.map({
number: 'prism-number',
tag: 'prism-tag'
});
This will rename only the number and tag classes.
I am debugging my website and I wish I could just search for all the occurrences of property through all the stylesheets.
For example I wish I could find all instances of the property color: #fff; and from that quickly browse through the selectors and the correspondent stylesheet.
Is this possible?
It is (as far as I am aware) impossible to search for a specific selector through the F12 Developer Tools. Having said that, it is very possible to add generic rules that would override existing selectors.
Depending on the exact element(s) that you want to modify the styles for, you can use a non-specific CSS selector to target all of them and apply a rule that would override any existing rules. For example, span will target all <span> tags, regardless of ID and class. You can target any element with the universal (*) selector.
However, it should be noted that the more 'generic' you are, the less 'specific' you are (which stands to reason). This means that if you have any other rules that are more specific, they will override your generic rules. As such, you'll want to combine a generic rule with the !important declaration.
Here's an example of that:
span {
color: red;
font-size: 20px; /* More specific than the * selector */
}
.more {
color: blue; /* Will override span */
}
* {
font-size: 40px;
color: green !important; /* Maximum specificity; override anything */
}
<span>One</span>
<span class="more">Two</span>
<div>Three</div>
In the above, all <span> elements are red. Then <span class="more"> turns blue, because it has a more specific selector. Although * is a less specific selector, adding the declaration !important to the color rule overrides the previous two colours set.
Keep in mind that the above should only be used for testing; you will almost never want to apply such a broad selector as * for production. Also, avoid using the !important declaration outside of testing as well, and instead work with CSS specificity.
You can either add the rules directly to your stylesheet temporarily, or preferably add them client-side through the F12 Developer Tools. Using the F12 Developer Tools will even showcase when rules are overridden (like in the above example) by placing a line through the middle of them. Rules are displayed from most specific to least specific.
The <span class="more"> from the above example is highlighted here:
I want to customize Bulma.
I read the document https://bulma.io/documentation/overview/customize/
but I cannot understand.
npm install bulma
cd node_modules/bulma
mv bulma.sass bulma.sass.org
vi bulma.sass
pasted Set your variables code and save named bulma.sass
npm run build-sass
and build error.
please teach me how to ?
First, the best way is not to change the node_module's file content.
The simplest way is to create custom scss file and include Bulma SCSS into it.
#charset "utf-8";
// modify the bulma variables here
$primary: #404BFF;
$navbar-item-img-max-height: 5rem;
$card-header-background-color: $primary;
$card-header-color: white;
$footer-background-color: $primary;
$footer-color: white;
// Import Bulma and Buefy styles
#import "~bulma"; // or fallow the partial import example from docs.
// add custom css here.
Maybe this is the page you need.
Otherwise, if you've installed sass you might choose to follow this step: I'm no npm expert so I chose to download Bulma, create a custom .sass file and let sass generate my css. This path is explained here: https://bulma.io/documentation/customize/with-sass-cli/
This may be bad form but if you write your own css in the html file, you can add !important to override the bulma colors.
i.e. if there's a button color you don't like such as is-primary you can do background-color: blue !important.
Just try not to use !important all over the place.
The better solution would be to download sass -- but I can't help with that. The other answer should help?
I discover that if you set an id="for-example" for a div and then you go to your styles.scss you can create a new class for that id.div like this:
#for-example {
background-color: blue;
}
I don't know if is a bad practice but it works for me!
I can't seem to add my own CSS file to the CKEditor. I'm downloading a custom version 4.5.8 and include the "StyleSheet Parser" plugin. The "Styles" list has the default styles, but not the ones from my css file.
This the code:
CKEDITOR.config.contentsCss = '../../../css/test.css';
CKEDITOR.replace('editor1');
The editor is loaded successfully, but the "Styles" list does not contain my styles. The location of my css files seems right, when I try other paths I get an error.
This is my test.css:
.testStyle {
color: red;
font-family: "Arial Black", arial-black;
}
Already tried clearing my browsers cache. I tried it in multiple browsers.
I tried one other thing: download the StyleSheet Parser separately, put it in the plugins folder, and use the following code:
CKEDITOR.config.extraPlugins = 'stylesheetparser';
CKEDITOR.config.contentsCss = '../../../css/test.css';
CKEDITOR.replace('editor1');
The "Styles" list is still not showing my style, but when I edit the source code and put my style in like this, the style is applied to the text in the editor(!):
<p class="testStyle">Test text</p>
Sources:
- CKEditor docs for the StyleSheet Parser
- The "contentsCss" option docs
The Styles in CKEditor require an element, so the StyleSheetParser only recognizes rules that include an element and a class name.
You should change your CSS to
p.testStyle {
color: red;
font-family: "Arial Black", arial-black;
}
I'm moving from FCK editor to CK editor 3.6.3 and the site has a background image, which is appearing in the CK editor. I need to remove this while using the same CSS file for both the general site and the CK editor (to pick up on CSS for the styles dropdown).
I tried setting config.BodyClass to a style with no image - this works on FCK2.x but not the CK3. I also found via google a config.extraCss setting but I don't see it in the docs, and it does not appear to do anything anyway.
Fullpage is off (i.e. editor is not producing <body><head> etc tags))
I've got a workaround by having two CSS files, one for the site and one for CK with a different body style, but there must be a better way?
Thanks,
Kevin
Config section:
config.stylesSet = 'my_styles:/admin/ckeditor/styles_dropdown.js';
config.contentsCss = '/newdesign/style.css';
//config.extraCss = 'body {background: none;background-image: none;}';
config.BodyClass = 'fckbody' ;
CSS section (of the 'main' css file)
body{
margin:0px; padding:0px; background-image:url(/newdesign/site_bg19.jpg); repeat; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#393939;
}
.fckbody {
background-color: white;
background: none;
background-image: none;
text-align:left;
}
The correct name in CKEditor is bodyClass with an initial lower case.
Thought I should post my insight here for my findings. I came across this page while looking for a reason why my CKEditor was showing a background image of my site.
If you CKEditor is showing a background image on the Make a Comment section of a node :
1 - Head to "admin/config/content/wysiwyg"
2 - click edit to the text format for which text format is showing the background image
3 - click the CSS tab drop down
4 - change the Editor CSS to "Editor Default CSS".
Hope this helps someone!