I'm running a Ghost blog hosted on Ghost.io.
They're currently running a system-wide update from Ghost 0.11 to Ghost 1.0.
The update went fine, but I've lost the PrismJS syntax highliting. The code blocks all share the same look - black over creamy-white.
My default.hbs seems to be setup correctly:
{{!-- Styles'n'Scripts --}}
...
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
...
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script> --}}
...
</body>
I have not changed the way I marked my code blocks:
```language-java
import com.package.test;
```
I've looked at Chrome dev console - there seems to be no errors.
Any leads?
Looking at the page source I've found out that all of my code blocks had the similar tags:
<pre class=" language-language"><code class="-java language-language">
The language-language part got me a bit suspicious.
TL;DR
So - apparently the Ghost team has switched markdown editors when updating to Ghost 1.x. The new editor adds the language- prefix automatically. So the code blocks should look like this:
```java
import com.package.test;
```
And the resulting HTML:
<pre class=" language-java"><code class=" language-java">
More info: https://www.devsbedevin.net/sytnax-highliting-with-prismjs-on-ghost-1-0/
Related
Hello guys I am new to node.
I have installed animate.css via npm and tested it on a HTML <div> element it created like usual the JSON package file. The code e.g.:
<h1 class="animate__animated animate__pulse">Animate box</h1>
<div class="animate-box animate__animated animate__pulse"></div>
Nothing is moving? Do I have to link it in head anyways?
Thank you for the noob question :D
For usage with the npm package, you'll need a full asset build stack which compiles animate.css into whatever CSS bundle your page already uses.
Because you said you are new to code, I highly suggest you stay away from this topic for a while. Instead, simply make use of the other suggested way, including animate.css via a content delivery network (CDN):
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
I'm trying to start using Polymer with Meteor, but have seen the following behaviour that I can't explain.
To reproduce git clone https://github.com/JeremyKells/meteor-polymer-testing.git and run meteor.
This is just the app created with:
meteor create testpoly
and then adding the polymer components with bower:
bower install --save Polymer/polymer
bower install --save PolymerElements/iron-elements
bower install --save PolymerElements/paper-elements
and adding the section to the code .
As is this runs ok, but if you remove the comments around either of these two lines:
<!-- <link rel="import" href="/bower_components/paper-dropdown/paper-dropdown.html"> -->
<!-- <link rel="import" href="/bower_components/paper-dialog/paper-action-dialog.html"> -->
The app shows the normal meteor counter app twice like this:
http://i.stack.imgur.com/KAv7Z.png
Why is this happening? How do I stop this?
Further info following Guissouma's response. I'm running this on Ubuntu 15.04, and mainly testing with chrome. When the UI elements are duplicated, clicking either button only updates the second 'counter', the first count remains at zero.
And on Firefox in this same environment, there is just the one set of UI elements, but the button does not work.
i.stack.imgur.com/bqumz.png
Trying with both Safari and Chrome on iphone connecting to this server give same results as firefox: It looks ok, but the button doesn't update the count value.
I tested the project with meteor on windows, it works as expected! I remove the comments from headers.html The app shows the normal meteor counter app.
On ubuntu 15.0.4 with firefox the button seem not working, this is due to the js file webcomponents.js imported on headers.html file.
Try to comment this line on headers.html and test again.
<!-- <script src="/bower_components/webcomponentsjs/webcomponents.min.js"></script> -->
This was a case of getting the import links wrong, when changing from Polymer 0.5 to Polymer 1.0.
It should be:
<link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
While I'm still confused as to why this caused html tags to be duplicated, and why this doesn't throw an error in the browser, it all works when I get the code correct!
tl;dr
Make sure your bower dependencies for Polymer and PaperElements are up to date. (i.e. use #^1.0.0 instead of #1.0.0.)
Details
The root cause of this issue is two fold:
Meteor responds with the content of the main page even when there is no resource at the path request, but it does not use a 404 (Not Found) status code.
HTML imports will include a referenced document into the page unless the response is an error.
It doesn't even matter if you're using Polymer. The following Meteor app will exhibit the duplication behavior:
<head>
<link rel="import" href="bad-link.html">
</head>
<body>
I'm Duplicated!<br>
</body>
The solution is to make sure your HTML imports are valid.
In my case, paper-icon-button.html had an import for paper-behaviors/paper-radio-button-behavior.html which doesn't exist in the latest version of paper-behaviors.
The reason for the inconsistency is because paper-icon-button was locked at version #1.0.0 but its own bower dependencies referenced paper-behaviors#^1.0.0 which means the latest version >= 1.0.0 and < 2.0.0.
The solution was to change my bower dependencies versions to use the semver caret syntax as well.
{
"dependecies": {
"polymer": "Polymer/polymer#^1.2.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
}
}
I'm using Bootstrap to develop a website and recently I asked here a question because some custom simple lines in CSS weren't working. I discovered that using development sites such as jsfiddle or codepen, the code works but I can't still get it working in my computer.
Do I need to install do something or install something? I thought it could be an issue of not using a web server, but I've just installed XAMPP and nothing...
In the end, I'm using XAMPP, with proper path xampp_path/etsit/index.html --> localhost/etsit/index.html. This doesn't work, there's no error in the cosole. When I just click in index.html to open it with the browser, it doesn't work either.
For bootstrap, I just add these links to the body (JUST FOR YOU TO KNOW I HAVEN'T DOWNLOADED BOOTSTRAP BUT I'M USING CDN):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
UPDATE
Sample in codepen and jsfiddle that work.
The original (it's the same code) you can find it in these other post I made.
UPDATE 2
Please, read the post entirely before editing my question and marking it as duplicate, not noticing that same question is mine and has been referenced twice in the post....
Based on your answers in the comments section, it seems as though you are not loading your CSS file. You've stated that you do indeed have a link to it in your in your code. So either a) that link is now gone (in which case you would not see it at all in your dev tools' network tab); or b) the link is incorrect (in which case you would be getting something like a 404 error in your network tab). Make sure the path to your CSS file is indeed correct and that it exists at the location that you are defining.
I am very confused, I just started to work on the CSS for my ASP.NET MVC4 website and I don't fully understand what is happening.
Currently my mobile layout works but any changes to it causes one strange effect after another. (e.g. the forms not being displayed to the ajax-loader.gif constantly being displayed.)
I have the following in .Layout.Mobile.cshtml
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I have modified the BundleMobileConfig.cs in App_start as follows:
// bundles.Add(new StyleBundle("~/Content/Mobile/css")
// .Include("~/Content/Site.Mobile.css"));
//kludge is the above wrong...and the following needed??
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/"));
I don't understand why this is NOT the default for this bundle?
Here are my questions / problems:
If you will note the stylesheets, I should not need to include the three explicit links, they should come from the bundles. But if delete any of them the site breaks.
Why won't the modified ~/Content/Mobile/css bundle pull up these css files?
For the script files I have looked at the code.jquery.com and I don't understand why I need these. My local code is the latest (i.e. jquery-1.9.1.js and jquery.mobile-1.2.0.js
I would expect that the version 1.9.1 shoud be able to replace the 1.7.1 without
problems, but it doesn't
The jquery.mobile.min.js should only be switching between a release and debug
vesion, which should not cause a problem, but it does.
I have used firebug to view what files are being loaded and I see that when I use just
the Render of the bundles without the explicit includes I don't get the files included, why not? I have read about bundles and it seems like I should just get the bundled files.
Can any one shed some light on what is happening and point me to a tutorial so I can learn
how to use how to debug CSS and bundles. I have read several and I find firebug very
useful, but I have no idea where to look next.
Try replacing your bundle code with this.
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/jquery.mobile*"));
This should load your files without explicitly doing so.
Your right this did work! Thanks....
The strange thing is that the following did not work:
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/jquery.mobile-{version}.js",
"~/Content/Mobile/css/jquery.mobile.theme-{version}.js",
"~/Content/Mobile/css/jquery.mobile.structure-{version}.js",
"~/Content/Mobile/css/"));
I understand why your example works...but don't understand why mine doesn't ... unless the version tag does not work like I expect it to....
Also I found out the jquery 1.9.1 is much different from 1.7.1 for this I had to do the following:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jquerymobile")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
this works....using your example I will figure out a wild card pattern to include this as well.
I'm trying to use both lightbox and slimbox with Composite c1 v3.
Neither works.
I have installed the relevant packages and I have set correctly the parameters for both functions.
The result is that when I use lightbox both thumbnail and the picture appears on the page.
When I use slimbox2, the thumbnail is fine but the picture opens to a new page.
I have tried it both with IE 9 and firefox 9.0.1 with the same result.
As far as Composite C1 is concerned, I'm working on Omnicorp example site.
Anyone with the some kind of problem?
I just tried the Slimbox2 package and it worked for me in Chrome and IE. I had success installing the package, going to a page in Content, and inserting the function. Then I picked the Media Folder parameter, and set it to be a constant and selected a folder path. Once published, the slimbox behaved as expected. I am not working with the Omnicorp demo, however.
The behavior sounds to me like some part of the script isn't loading or is loading in the wrong order. Does the Omnicorp site, or another package have conflicting jQuery import(s) in the head section of a published page?
Looks like the packages have a bug, when site is running in sub-folder the javascripts files are not loaded.
Do you run your site in subfolder?
Try to fix this.
Go to Functions perspective -> Xslt functions -> locate function Composite.Media.ImageGallery.Slimbox2 -> edit its template and fix links to the files, add ~ at the begin:
<script id="slimbox2-js" src="~/Frontend/Composite/Media/ImageGallery/Slimbox-2.04/js/slimbox2.js" type="text/javascript"></script>
<link id="slimbox-2.04" media="screen" type="text/css" href="~/Frontend/Composite/Media/ImageGallery/Slimbox-2.04/css/slimbox2.css" rel="stylesheet" />
also locate function Composite.Web.Html.Lightbox, edit its template and fix links to the files (add ~):
<script id="html-lightbox-js" src="~/Frontend/Composite/Web/Html/Lightbox/js/jquery.html-lightbox.js" type="text/javascript"></script>
<link id="html-lightbox-css" media="screen" type="text/css" href="~/Frontend/Composite/Web/Html/Lightbox/css/html-lightbox.css" rel="stylesheet" />