I have a Svelte component that uses three different languages within one file. I'd like to have Vim highlight each language inside of (but not including) the appropriate tags.
How can I configure my .vimrc to enable this?
Example:
my-component.sv
<script lang='coffeescript'>
// Highlight everything in here as CoffeeScript.
import History from './History'
import Leader from './Leader'
import Spinner from './Spinner'
getBalances = () ->
response = await fetch('/api/balances')
await response.json()
</script>
<template lang='pug'>
// Highlight everything in here as Pug.
main
h1 Balance
+await('getBalances')
Spinner
+then
Leader
History
</template>
<style lang='stylus'>
// Highlight everything in here as Stylus.
main
font-family 'Helvetica Neue'
h1
font-weight 200
margin-bottom 10rem
text-align center
</style>
Analog to existing plugins for single file components like posva/vim-vue, you'd need a plugin that takes care of context sensitive syntax highlighting, like evanleck/vim-svelte or leafOfTree/vim-svelte-plugin. I cannot attest to the quality of the latter and there might be better alternatives available.
Vim needs rather specific syntax rules but since most of the work is done in the Vue plugin, it should be easy to adapt for Svelte, since the basic SFC syntax appears to be identical. From what I gather, burner/vim-svelte should do what you need.
The official docs are currently rather not helpful with that. They expect you to just have everything being HTML.
Related
Am I missing something? I have a rendering pipeline set up with assemble.io via an express server and everything is rendering as expected. However, when I add in bracket fences for Markdown there seems to be an issue with the syntax highlighting. It does drop the code into <code> and <pre> tags as expected and when I add in the language identifier after the top fence it does add in the class="language-[LANG] like you would think it would, however, it does nothing to the code within it (e.g. wrapping the tag elements, attributes, important names, etc. in span tags).
Is there a helper I need to add to the pipeline and pass the file through? So far I've tried adding prismjs, but that flattened the entire page into code (not ideal).
Result:
<a href="">this is the link</a>
Expected:
<<span class="some-tag-class">a</span> <span class="some-name-class">href</span>="">this is the link</a>
Looking at the markdown documentation directly or at the assemble.io documentation does no good.
It's clearly listed on the helper-markdown github/npm sites respectivly.
I have some MathJax on my webpage and would like nothing to appear until the MathJax has finished processing my equations: no raw LaTeX and no loading progress indicator.
Is there a way to accomplish this with MathJax configuration settings?
Hey if you still need an answer, try the following.
If you call MathJax.Hub.Config(), pass the parameter preview: "none" to the tex2jax object in the config. Like so:
MathJax.Hub.Config({
tex2jax:
{
preview: "none"
}
});
This will not show any raw tex commands that MathJax will pick up. It will allow to you still display other elements in your markup so your page doesn't look blank as the browser renders it.
Hope this helps.
I am trying to customize the Liferay UI by using custom theme using base as as "_Styled" theme.
I have my own css files which I coped to _diff/css folder of theme and imported them "custom.css" file .However its breaking the presentation of liferay.In my custom CSS I have styles defined for all the standard tags like body,div etc which is impacting the liferay UI too.
How can I resolve this conflict? Thanks in advance!
Quick (and not the best) solution is to remove contents of liferays css file (for example "base.css") and save this empty file in /diff/css/ folder of your theme. This way the base.css will get overriden with your new empty file and thus no styles will get loaded. And your custom.css will be the only stylesheet that is taken into account.
Well, of course it all has an effect on the rest of Liferay as well. Liferay provides quite a bit of the HTML DOM of your page, and if you change the presentation of all of those elements, you'll have to take care to style Liferay's elements too.
Is this a conflict? No. Let's go for the simplest case: You declare div {color:green;}. Of course, now everything, your components as well as Liferay's components, use green text. If you only want to style your own portlets, you might want to specify some portlets: div.portlet-my-own-application {color:green;}
I know that color is a too simple usecase, but I hope it illustrates the solution strategy.
Rather than following Artem Khojoyan's suggestion to override Liferay's base.css, I'd recommend to take a look at the resulting css, what's effective etc., and simplify your own css - adapt it to be used within Liferay - by inspecting the effective CSS for every elements that looks off. Firebug or any of it's relatives are your friend.
I'm afraid, with the details "I'm doing something which has an effect on Liferay UI" there's nothing much more to help you. In fact, I'd hope that what you do has an effect on Liferay's UI... You'll just need to find the proper CSS code
Ideally if your styles are loaded from custom.css, then will overwrite liferay default styles.
In some cases, to overwrite a style in css, you can use !important
for example, liferay default style
body {
background-color: #fff
}
You can specify your style to consider irrespective of order of loading
body {
background-color: red !important;
}
For a recent site, the client has 5 different brand styling colours. So to keep track of everything in the less files (which we use node to compile to one final css file), I've defined the colours as less variables and used the .button-variant() mixin to generate the styles. e.g.
#color-cta-light: #df134d;
#color-cta-dark: #860c2f;
#color-cta-background: #fcf7fa;
.btn-cta {
.button-variant(#ffffff, #color-cta-light, #color-cta-dark);
}
That works fine. However, I've done this with panels as well, and I've now ended up with an 11,000 line long css file. It is this long because we need the majority of the default Bootstrap styling (such as .btn styling) as well as my custom styles.
What I am wondering is, (and keeping it simply by using just buttons as an example) is there a good easy way to remove the lines in the css that pertain to the default Bootstrap button styling, i.e. btn-success, btn-warning, etc. By easy, I mean automatically. We're using the node lessc modules to compile the less files (using a grunt watcher), so I imagine whatever it is that would need to happen would be run after the compile.
Alternatively, should I just amend the default bootstrap mixins to do nothing, and use my own custom mixins? I feel like that should work but that would mean a bit of extra time each new version of Bootstrap (currently 3.1) spent making sure that the custom mixins are up to date.
What I'm hoping to end up with is a single stylesheet, with default button styling from button.less without the additional overload of unused CSS. With my understanding, it's not possible but I'm hoping there are some tools out there that I don't know of that would help my situation.
If I understand you correctly, looking at both your question and your comment to Bass Jobsen, you want to keep Bootstrap styling, but not for the "button styling."
I believe the LESS (reference) feature is still what you want, but just selectively applied.
Assuming you are using the "bootstrap.less" file, add the reference notation just before the "buttons.less" file, like so (I've elided much of the normal "boostrap.less" file for brevity):
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
...
// Core CSS
...
#import (reference) "buttons.less";
// Components
...
// Utility classes
#import "utilities.less";
#import "responsive-utilities.less";
This will totally deactivate all classes from "buttons.less" from being generated in your output css code, but still keep those classes available for mixin purposes. Should you need a particular piece from that code, let us say you wanted to keep the base .btn class, then you would have to add it back into your css, like so:
.btn {
.btn;
}
The outer .btn will reform a class in your code, while the inner .btn will use the referenced "buttons.less" .btn to generate the code.
Using (reference) in this way lets you selectively remove aspects of boostrap by module, while keeping those aspects accessible for the rest of bootstrap and for any mixin uses you have for it. This is probably a preferable method if you desire to remove most of the code from a module (if you actually wanted to keep most of the code, it would probably be best to just let the unused portion remain and import it normally).
You can use import with reference:
#import (reference) "bootstrap.less";
#color-cta-light: #df134d;
#color-cta-dark: #860c2f;
#color-cta-background: #fcf7fa;
.btn-cta {
.button-variant(#ffffff, #color-cta-light, #color-cta-dark);
}
This will give you only the CSS for you button. (and some :before : after pseudo classes which seems a bug for me).
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text