I want to introduce into my project some code to be highlighted on certain pages (like index.hbs) I've searched for libraries that can do this and found tools like highlight.js, but I was unable to use it in my ember project. Can anyone explain how to import a custom library like highlight.js or can someone give me a recomandation for a tool. I've tried to use this tool: ember-cli-eg-code-highlight, but it is not specified how to use it. Ok I have installed it, pasted the {{highlight-js code=file lang=language hasLineNumbers=hasLineNumbers}} in my index.hbs, but it does not work. Also the ENV.emberHighlightJs: { style: 'arta' };I have no ideea where to put it. Tried to put it inember-cli-build.js but it is not working.
I have found also markdown-code-highlighting. But I am lost at this step: "In your Brocfile you'll need to import the CSS styling you want for the highlighter. " So where exactly is my brocfile in my ember project?
Did you restart ember server ?
You can find example of using ember-cli-eg-code-highlight here: https://github.com/EmberGrep/ember-cli-eg-code-highlight/blob/master/tests/dummy/app/templates/application.hbs
But it looks like addon is buggy. So it worth to check this PR https://github.com/EmberGrep/ember-cli-eg-code-highlight/pull/9
P.S. about brocfile -- now it names as ember-cli-build.js at the root of project
Related
Ive installed the prettier-plugin-tailwindcss in my emberjs app. It runs and sorts the classes in my css files correctly but it doesnt touch the handlebars files. The standard prettier stuff still works in the handlebar files.
Ive tried adding a twConfig to the .prettierrc as suggested in the docs but that was unrecognised.
I'd really like to use this plugin but I need to support the handlebars files. Please let me know if anyone has any ideas on how I could solve this.
Here's my current prettierrc.yaml
# We use pretty much all defaults from Prettier https://prettier.io/docs/en/options.html
# We prefer single quotes to align with our internal RECONZ styleguide
singleQuote: true
twConfig: 'app/tailwind/config.js' // adding this throws this error below
// [warn] Ignored unknown option { twConfig: "app/tailwind/config.js" }.
overrides:
- files: '*.hbs'
options:
parser: 'glimmer'
# The Ember community uses single quotes in JS & double in templates
singleQuote: false
These are the versions I have installed:
"prettier": "^2.6.0",
"prettier-plugin-tailwindcss": "^0.1.11",
yarn: v1.22.17
UPDATE: the issue seems to be the parser which is set to glimmer When I tried with html instead the plugin worked but unfortunately I need to keep the parser as glimmer because html also causes some unwanted effects. Is there another option I could use?
Currently, all my angular material HTML attributes are highlighted in yellow with WebStorm 9 (Mac OS X Yosemite) warning: "Attribute [name] is not allowed here".
How can I teach WS to automatically recognize these attributes as valid? I am aware that I can add each one one-by-one to the list of custom attributes, but was hoping that there would be a better way to do this.
UPDATE:
Just wanted to clarify that this issue applies to Angular Material project, and not the AngularJS itself.
You need to add the angular-material.js file as a Library in WebStorm:
Open Preferences (Mac: Cmd+,, Win/Linux: Ctrl+Alt+S)
Go to Languages & Frameworks > JavaScript > Libraries
Click Add and then press the + icon
Find angular-material.js in your node_modules folder
Add a Name and a version and press Ok
Now you will have completions for all elements and attributes that have an #ngdoc documentation in the angular-material source code.
Usage
Start typing and you will see the completions:
Pressing F1 (Ctrl+Q on Win/Linux) will also show some docs, if available in the source code:
Important note
Not all features are properly documented, the following won't show up (unless you already used them) cause they are defined dynamically in a loop, with no #ngdoc for them:
var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
var API_NO_VALUES = [ "show", "hide", "layout-padding", "layout-margin" ];
So for these you'd have to add them as a custom attribute (Alt+Enter > "Add flex to custom html attributes").
Environment
Tested on a Mac OS X 10.11.4 using WebStorm 2016.1.1, but this should work for older versions as well.
I am using PHPStorm, which is a sister Project of WebStorm, but it should work the same way.
You maybe need to add the Library:
File
Settings
Languages & Frameworks
Javascript
Librarys
Add here AngularJS
If this does not work, you can add them manually:
Follow this Steps:
File
Default Settings
Editor
Inspection
HTML
Unknown HTML tag attributes
To the right you will see in Options "Custom HTML tag attributes". Enter here the attributes you want to allow.
I highly recomend you to install the Angular.js plugin:
Go to menu File > Settings (or ctrl + alt + S if you're on Windows);
Select Plugins in the window that'll open;
Click in the Browse Repositories button;
Type AngularJS in the search field. Select the plugin;
Click Install Plugin.
The plugin is incumbed to read #ngdoc annotations present in ngMaterial sources and create documentation for their directives.
It seems to support WebStorm and other IDEs, but I could not find it in the plugin registry while filtering by other IDEs. Maybe it'll work inside WebStorm...
Anyway, this is what you get:
You have also a plugin that helps a lot, check it out. It helps a lot
Angular material v2, Teradata covalent v1, Angular flex layout v1 & Material icon live templates
And with the solution provided by #Alex Ilyaev gives a lot of help.
But its no perfect.
Hope it helps.
Currently I don't think that idea's AngularJS plugin understands angular-materials attribute extensions.
It does understand the directives i.e. control click <md-button ...> and the directive (custom tag) is found.
For now you will have to add the attributes af custom attributes in order to get a "green" page.
I'm using ember-cli-compass-compiler right now, it works well if only compass used, but I also want to use some plugins, such as Susy. I don't know how to require plugins with compass.
I've try to read the source code, founded it has a option object and includes require: sass-CSS-importer by default, but how to override/extend this option? What code should I put in Broccoli.js file?
Thanks for helping.
Finally I figure this out by myself, in case of someone needs help, I put my solution at here:
Open Brocfile.js and find this line:
var app = new EmberApp();
then, change it to:
var app = new EmberApp({
compassOptions: {
require: ['sass-css-importer', 'susy']
}
});
this assumes you want to use Susy as well as me, and of course you can override other options like above.
BTW, if you use sass syntax checker, e.g. syntastic in vim, #import "susy"; will rise an error about load path problem. Before using Ember-CLI, I use a config.rb as compass's configurations, so sass knows about require "susy" is a dependency should be concerned about. But now we no longer have config.rb file anymore, fortunately you can let sass knows required gem(s) by passing -r GEM_NAME to passing the syntax checker. For case of syntastic, you can simply put this line in your .vimrc file:
let g:syntastic_scss_sass_args = "-r sass-css-importer -r susy"
I know, I know, the first thing you are thinking is to check all of the instructions online and on dajaxproject.com
Well I have checked and checked and rerun this installation and I cannot figure out what the problem is. I assume it has something to do with the version of Dajaxice I am using and the version the installation instructions are, but those details are usually missing.
At this point in the process, I have everything setup to accomplish a very simple task. Load a webpage from the IP:8000 (ie 1.2.3.4:8000) and have that page load a simple html form button. Once that button is pressed, the page should then send a mesage (using dajaxice) to the server, and once it returns an alert box will pop up, proving that the dajaxice install is working.
So, I have:
Installed Dajaxice (and dajax for that matter), by getting the zip from here: github [dot] com/jorgebastida/django-dajaxice/
Changed everything in a basic Django project to follow the details in this tutorial: http://django-dajaxice.readthedocs.org/en/latest/installation.html
I have setup all of the details of ajax.py, and index.html to work with this example: django-dajaxice [dot] readthedocs [dot] org/en/latest/quickstart.html
PS Sorry for the "[dot]"s, but being a new registered user they limit you to 2 per post, so I tried to give you the best links clickable.
I am stumped. I have been trying many different things, but the documentation available seems so sporadic. It's gotta be something simple I am messing up, but I cannot seem to find it.
Currently, the "Say Hello!" button shows up on the screen, but nothing happens when you press it. Any ideas?
Here is a link to the zip file of the Django project I am working with here: https://docs.google.com/open?id=0B5rzYk6W5HlrYk9veVRfM3JkTGc
The way I have it all organized, DjangoAjax is just the folder containing the Django project. ajax_prac is the project, and practice is an app. Also you'll see a folder called django_media...that's pretty self explanatory, it just holds all the "media" for my Django projects, including jquery.js and jquery.dajax.core.js
If there are some details that I have smudged in the code, contrary to the installation guide, I apologize. I have been working through so many iterations of this, that it is likely I could've forgotten to change something back when making this post.
Can anyone help?
All the documentation weirdness is probably related with the new release I made yesterday (8 hours ago). Probably you was using an old version of dajaxice reading the new documentation.
I've release django-dajaxice (0.5) and django-dajax (0.9.1), both fully compatible with the last version of Django (1.4.1).
django-dajaxice: http://pypi.python.org/pypi/django-dajaxice
django-dajax: http://pypi.python.org/pypi/django-dajax
For this release I've also rewrite both documentations and hosted them on readthedocs. Also, http://dajaxproject.com code is now opensource so everybody can read the code and see how dajaxice works in production.
django-dajaxice: http://django-dajaxice.readthedocs.org/en/latest/
django-dajax: http://django-dajax.readthedocs.org/en/latest/
example project: https://github.com/jorgebastida/dajaxproject.com
Could you please upgrade to django-dajaxice (0.5) follow the new installation steps (quite similar http://django-dajaxice.readthedocs.org/en/latest/installation.html) and post here any traceback/issue you could have?
Thanks
In your example code ( DjangoAjax / ajax_prac / templatedirectory / practice / index.html):
<input type="button" value="Send message to server!"
onclick="Dajaxice.ajax.sayhello(my_js_callback);">
Should be:
<input type="button" value="Send message to server!"
onclick="Dajaxice.ajax_prac.practice.views.sayhello(my_js_callback);">
I.e. It must reference a Python module that contains your registered Dajaxice view. And according to your sample code, ajax_prac.practice.views exists while ajax.sayhello does not.
Also the Python module must be prefaced with "Dajaxice" (which is probably a significant source of confusion).
I want to change the color of the headers in a grouped list. For the moment I've got the default theme. I think I have to use something like "$list-header-bg-color" but :
WHERE can I use it ? I tried to write something like :
$list-header-bg-color = '#CCC'
directly at the end of the "sencha-touch.css" file but it doesn't work at all ... Somebody can explain me how does it works ? (with a little example please). Thanks in advance
First you need to install ruby
then install ruby gems
then install compass
then open your application *.scss file (should be in resources/sass/)
after the line
#import 'sencha-touch/default/all';
include your line
$list-header-bg-color = '#CCC'
Note that by default the value of this var is
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
Maybe you can change the base-color to have a more "unified" look (depending on what you want to do ...)
then compile your scss file
compass compile
Now your theme should have been compiled to your app.css and your new color is good :)
For more detail check this article I wrote not long ago : sass-for-sencha-touch-2-windows-7
Sencha is using SASS for theming. So that line should go in the sencha-touch.scss file. Then you should compile that file with compass to get a css file. See this videos:
http://vimeo.com/26506883
http://vimeo.com/17879651
slides from presentation http://www.slideshare.net/senchainc/theming-sencha-touch
reference docs http://dev.sencha.com/deploy/touch/docs/theme/
Check this also http://www.sencha.com/blog/sencha-touch-theme-contest-winners-announced/