I'm baffled! I built ckeditor 4.13 using the online builder, and included the codesnippet plugin. Now when I chose the plugin within the editor from the toolbar it allows me to add the code under which ever language I choose, but the syntax highlighting doesn't work for all languages. For example CSS is not highlighted. The background of the chosen theme is there, but no highlighting. SQL queries are fine as are some others, but not CSS or PHP it would seem!
Also, I'm editing in one place and then viewing the article on another place (pulling the article from a database). The styling is completely missing altogether when it's the article is viewed. I tried to find a CSS file which may contain the classes that had been attached to the snippets (such as language-php) but couldn't. I thought if I just linked to the CSS file in my header it would attach the styling...I was wrong!
Any ideas how I can tackle this issue please? Google has brought nothing so far.
For anyone interested, I've found the best way to deal with the syntax highlighting issue is to download prism. This will work with the classes produced by ckeditors codesnippet plugin and colour code the syntax according the theme you chose from Prism. Look at prismjs.com.
Related
I am writing a website in HTML This is what visual studio tells me for school and the CSS file's doesn't recognize my snap-scroll-type tag and my snap-scroll-align tag. I am writing in Atom but because of this problem i tried visual studio and it still doesn't recognizes the tags.
This is my code
It's just a VSCode bug I'd assume, try searching for something within the marketplace such as CSS intellisense.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
I also don't know if you're utilizing it correctly.
There have been multiple questions asked on SO regarding unknown properties in VS Code. You should be able to whitelist valid properties if necessary, see https://stackoverflow.com/a/54133730/2029959
As pointed out on VS Code's Github repo - https://github.com/Microsoft/vscode/issues/47775#issuecomment-420082168 - it actually shouldn't be an issue anymore as MDN data should be linked to. (https://github.com/microsoft/vscode/issues/48443)
If - on the other hand - your code doesn't work in the browser, please update your question and show us your code or submit a link to see.
My Vim level is about intermediate - I've been using it about 10 years, but on "newbie" level - find file, delete something, add something, save and quit.
Now I decided to make Vim my only code editor.
I'm working with Ionic framework (it's Angular + SCSS) and I have a question about some useful things:
Is there a way to add all non-standard HTML tag to Syntastic? It's highlights all of Ionic tags, such as <ion-list>, <ion-button>, <ion-radio> and so on. If my google skills are good enough, there's no full Ionic plugin, which will add snippets, syntastic checkers and so on.
Is there a way to find and add classes from HTML to SCSS and from SCSS to HTML? I mean, if I'll write .my-very-important-class in SCSS file and then go to HTML file (which is in the same directory with same name and differs by .html or .scss) and in class="" attribute start to input "my" I'll get autocomplete suggest for this class. Is it real to make or maybe someone did already?
There is also main file for theming an app, called variables.scss. I need this file to be scanned and match colors (in this file there is an color section, where I can put all colors, I'll need in app, and in .scss file of any page I can get color I need with just color: color($colors, colorname) where colorname is the name of color variable. It's awesome feature, except no color highlighting in code. So it would be great to get color mappings and then highlighting with correct color in .scss file of page.
I didn't found any plugins for this. If there some existing plugins I've missed - I'll be happy to try it. If it's no - I will be glad to made one myself (if it's not very hard). Anyway, I think this are useful things not just for me.
UPD: #1 was fixed - I'm not sure, how exactly, but now it's fine in HTML and I have no errors or warnings from syntastic about wrong tags. I'm feeling newbie, but seems like I forgot to install Vim-ionic2 plugin - just added it to my .vimrc.
And #2 seems to be answered - does what I need.
Syntastic is a frontend to several linters. Find the linter used by Syntastic and look for a way to make it accept those custom tags.
If you have the CSS file opened, <C-n> should let you complete the CSS class.
You might need something like set iskeyword+=- for Vim to complete the whole class name.
I think this would be totally useless. That said, if you didn't find such a thing… write it.
respect to the first point I'll say that vim for itself doesn't highlights all the HTML elements (main, header,etc) because the default html.vim file is a little outdated. However, I've just created a repository in which I added all the remaining elements to be highlighted.
If you encounter that something in the language you're working on doesn't get highlighted you should create a .vim file adding the keywords you want to be highlighted. I share you the repository I've talked about: github repo
It'll be nice that people can contribute so we don't have to create repeated vim files.
You can read more about syntax here: vimdocumentation
First off, I'd really recommend you split this into three separate questions. I feel like they could easily have dedicated answers that are not really connected. And someone might have a good suggestion for one of them, but not for the others. On my side, I can give you suggestions about 2) and 3) only.
For 2), you could use romainl's suggestion for completing keywords. You could also try generating tags for your CSS files using ctags. Here's one possible way to do it: https://github.com/rstacruz/ctags-css. Once you have the tags, you could use tag completion. See :help ins-completion, in particular the "tags" section. It would be a pretty good idea to read up the entire section, though, to get an overview of what's possible.
For 3), there's plugins around for this. Try this one: https://github.com/lilydjwg/colorizer
I am implementing the Summernote Editor which rely on Bootstrap, but I usse my own custom stylesheet. This gives me 2 problems:
It breaks my design and the Bootstrap file is so long it is difficult to find the exact selectors causing the trouble.
It loads a 120kB file, when maybe just 20-30 is necessary (the part actually needed for the editor to render nice).
Does anyone know a tool (maybe online) to compare the actual used tags, classes etc. in the source code with the attached stylesheet pointing out what is in use?
Could also be helpful after a long developing proces, where you have made a lot of editing and you maybe ended up with a lot of un-used code.
Please right click and select Inspect Element while you are on your webpage on any browser.
You could use purifyCSS, which would require grunt or alike. There's this site https://unused-css.com/, which would require a URL of your site, it then would scan just a single page of that site. There's also this tool: https://sourceforge.net/projects/cssscanner/, which gives you list of used and unused selectors, but you need a machine running Windows to use.
I have been tinkering with joomla recently.I was able to change css style using chrome dev tool, which helped me locate the css code that is responsible for the style I inspect. Now I want the same for html codes. The template that I'm using has an offcanvas menu, and when I inspect it, I can see the codes that form the menu, and I want to modify them, as I did with many css codes, however there is no locate or open containing file for html elements. Is there a way to do this? Since I did not write this template, I don't know which is which and where. Many thanks.
You could use Joomla layout overrides to achieve what you describe, check out this link for full details:
https://docs.joomla.org/Understanding_Output_Overrides#Module_Layout_Overrides
The idea is that you move a copy of the module file you want to modify to
/templates/your_template/html/ and Joomla will override the original output with the output from your custom file. You can do the same with components and plugins, it's really powerful.
Another reason that overrides are the way to go is that there's no risk that you'll loose your changes when you update the extension you are customising.
If you Google Joomla overrides you'll find other resources and once you get started you'll find it's surprisingly easy :)
Good luck!
I don't recommend editing css or html in Joomla via the dev tools, because of the problem you're having - sometimes it's hard to know what(and where) exactly you're changing something.
If you have access to the file for the template it should have a pretty straightforward file structure, i.e. all the html is in a html folder, the css in a css folder etc. Learn more here.
I recommend locating those files and editing them with a text editor.
To make a file depends on the framework you add one to Joomla template is not used.
But in all cases you index.php is a file that can address the heads of a css your new address
One of the web application I developed uses Primefaces 2.2. I'm delaying the migration to 3.X because I think the users are more comfortable with the 'old' look and feel of some components.
In the calendar I liked the 2.2 icon on the popup button and I would like to go on with it. Unfortunately it seems the easy way to achieve this goal, the attribute popupIcon, is no more supported, despite it is still present in the guide for 3.X
FileUpload was completely rewritten and its look is radically changed: now in the auto mode the browse (choose file) button is inside a rounded box with a background image and color set. I preferred the 2.X look, where there is no rounded box. Besides making some tests with Internet Explorer 9 I noticed the UploadedFile.getFileName() gives now the full path of the file, while I have functioning code expecting only the file name without path. The migration guide tells nothing about this change which is completely undocumented.
I believe the original look and feel can be restored with some css override, but I have already tried without success reading also this
Primefaces: how to change the default icon on the button of the calendar field?
and I would like to receive some advices.
My major concern is that css modifications can affect other components, so it is necessary to be very specific.
Thanks
Filippo
I don't think there is a quick fix, in fact I think it will be a lot of work. As you said yourself, the look and feel for some elements has changed a lot. However PrimeFaces is highly customizable when it comes to styling.
I suggest you download the manual from the PrimeFaces site (PDF) and get to work using CSS as your weapon of choice. Maybe you can re-use the CSS of PrimeFaces 2.x as a reference.