I really like the getting started guide by Bootstrap (http://getbootstrap.com/css/), and I want to do something similar in my project. I've looked at highlight.js but it seems the color is a bit off to me. I don't know how to implement the copy to clipboard feature. Is this something I should be able to come up with on my own? I prefer third party solutions since this isn't the main crux of my project, but I thought this will be nice to my users.
I'd suggest giving highlight.js another look. There are multiple style themes you can choose from if you find the color to be off on a particular one. Or, you can do a little css to customize the colors yourself.
An alternative for syntax highlighting is prism.js.
For the copy to clipboard piece, take a look at ZeroClipboard.
Related
I am very curious about how this rail text animation is made ("Creativity meets healthy food")
https://www.studiogusto.com/project/misura/
I've looked thousands of css generator webs and I can't find that animation! When going into developer tools, I don't understand why they copy and paste it so many times. Does anybody has a clue? I'd like to use it to put an "under construction" in my own web.
I tried to look for animation examples and I don't find it. When inspecting the code, I don't understand why they copy and paste it so many times.
Please note I am a beginner :)
Thanks,
... it looks like a CSS TRANSFORMATION of the block of text. And there's always the option to use something like GreenSock js lib (that's a whole different bag of possibilities though)
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.
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’m building a site as part of my research using Word Press. I’m trying to display samples on the homepage in a neat way, something similar to this one http://www.maitrechoux.com/menu/index.html?categ_id=all .
I have removed all of the home function using remove_action. How can I add the table and then how can I add the pictures inside each cell? Is it only matter of CSS or do I need to add HTML code for this? I recently joined word press community and this is the only thing remained to complete my website. Really appreciate any help!
NO, don't use tables. I think what you actually want is just to display something that looks like table.
You need to code both html and css for that.
You can use any of popular css frameworks to help you out, or you can code it yourself using, flex, floats, or grid...
When you are done then with wp functions you need to render that data in your wp theme.
Your question is to broad and big to be answered via code snippets or examples, sorry.
I recently wanted to change the template of my WordPress website and use React tables.
But this would cause my site to drop in Google rankings, and in terms of SEO, this would not be a good thing.
That's why I decided to use my template pre-built tables and change the files to my liking in the settings section by editing css files.
http://twitter.github.com/bootstrap/scaffolding.html
http://angularjs.org/#/list (the basics one)
Basically, I'm wondering what tools there are out there for me to create what they have there. The one I really like is he angularJS one, because I need a way to allow annotations within my code snippets.
So, basically. My question is this:
How did they create the annotations to work at certain places in the code (so you hover over the highlight), is that created from a library. If so, where is this library found? I found some online, but they all looked like terrible sticky notes, and I want something more stylish like this.
And finally, how do i get the line numbering to work?
Thank you.
Alex.