I just followed the below link to set up syntaxhighlighter on my blog:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html
But as given in this link, i tried to use the brush plain but i am getting the error as can't find brush for : plain
Any suggestions?
I use to use GIT hub to do this work in pretty much 8 simple steps,
1) Browse to https://gist.github.com
2) Add a Gist Description (optional)
3) Add a file name with an extension (extension will be used to add syntax highlighting)
4) Add your code snippet which need to be added to your blog post
5) Click “Create Public Gist” button at the bottom
6) Click on the “embed” link and copy the script generated
This is all from Gist side. Now to Blogger,
Paste the script where you need to add the code snippet
Make sure to select the option “Interpret typed HTML” under Post Options -> Compose Settings
I found this steps in this blogspot
Remember how you added the files at the top of the HTML of your page for the essential SyntaxHighlighter CSS files and JavaScript brush files? The website tutorial you found does not add the brush plain to its list of brushes. All you have to do is add this (http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js) JavaScript file under the other brush files that look like this:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css' />
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript' />
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' />
Basically, just add this under your other brushes:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript' />
Related
I recently installed Magento 2.3 and extended the default Magento Luma theme by creating a custom theme.
I'm trying to override type attributes of default JavaScript and CSS files in the <HEAD>.
In other words, I want this:
<link rel="stylesheet" type="text/css" media="all" href="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/calendar.css" />
<script type="text/javascript" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/requirejs/require.js"></script>
<script type="text/javascript" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/polyfill.js"></script>
to become this:
<link rel="stylesheet" type="text/css/custom" media="all" href="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/calendar.css" />
<script type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/requirejs/require.js"></script>
<script type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/polyfill.js"></script>
Notice the change from text/javascript to text/javascript/custom. Similar for CSS.
I tried updating my default_head_blocks.xml file like so:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="mage/calendar.css" type="text/css/custom"/>
<script src="requirejs/require.js" type="text/javascript/custom"/>
<script src="mage/polyfill.js" type="text/javascript/custom"/>
</head>
</page>
But what I get is:
<link rel="stylesheet" type="text/css" type="text/css/custom" media="all" href="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/calendar.css" />
<script type="text/javascript" type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/requirejs/require.js"></script>
<script type="text/javascript" type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/polyfill.js"></script>
Notice the double type declarations instead of single.
Is there a way to achieve what I described i.e. overriding type attributes for JavaScript and CSS files?
P.S. I know why I need to do this, I'm just not able to explain fully here.
I couldn't find another option to do this besides using root.phtml. Here are the steps:
Create a templates folder under Magento_Theme folder in your theme space
Create root.phtml file inside this directory [templates]
Open <Magento_root>/vendor/magento/module-theme/view/base/templates/root.phtml, then copy and paste its contents into the root.phtml in your theme space
Create a function to modify $headContent. I used preg_replace with a regular expression to find the duplicate references and then remove what I did not need. It was just a few lines of code.
Upload, then flush cache
In a presentation, I would like to create a Twitter Timeline with a few selected tweets. In the best case it should look as natural as if someone went to Twitter on his own computer or saw it on his smartphone.
I am using LateX Beamer for the rest of the slides, but I am flexible if it is another software that allows to export a PDF/Image that I could include in LateX.
(There are a lot of tools on how to integrate live Tweets in PowerPoint / Keynote , but I want to do it for historical tweets and will be offline during the presentation.)
I was trying the following:
- Simply take screenshots of the tweet and arrange them within LateX or PowerPoint. Looks ok but not super nice, and quite cumbersome to do.
Since it is possible to extract an html of a tweet to embed on a homepage, I thought of doing this for the presentation. Unfortunately, I don't know much of html / reveal.js presentations.
Has anybody found a good solution for a similar problem?
EDIT:
I started reveal.js and found the following plugin: https://github.com/rajgoel/reveal.js-plugins/tree/master/embed-tweet
I was then trying to apply it and followed the intros to reveal.js and also saved the source code of the plugin into my plugin folder for reveal.js. However, it does not work (=Returning a blank page in the html). Can anybody point me to my error? (I am completely new to reveal.js / html so sorry if it is basic?)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js 3 Slide Demo</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!--Add support for earlier versions of Internet Explorer -->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap the entire slide show in a div using the "reveal" class. -->
<div class="reveal">
<!-- Wrap all slides in a single "slides" class -->
<div class="slides">
<!-- ALL SLIDES GO HERE -->
<!-- Each section element contains an individual slide -->
<section>
<div class="tweet" data-src="https://twitter.com/marcfbellemare/status/972558957645631488"></div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Required, even if empty.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'plugin/embed-tweet/embed-tweet.js' },
// ...
]
});
</script>
</body>
</html>
Example CSS
#wrap{margin:20px}
Code prettify wraps the whole line in .com
<span class="com">#wrap{margin:20px}</span>
Somebody has a similar issue here.
Where someone answers "Are you loading lang-css.js?".
Here's what I'm loading in the footer.
<script src="/js/google-code-prettify/lang-css.js"></script>
<script src="/js/google-code-prettify/prettify.js"></script>
I can see both of them with web inspector. I tried changing the order and loading them from the header. I'm using the latest version.
All help is greatly appreciated :)
Thanks!
The order you link to the javascript files matters. You need to call the base code (prettify.js) first followed by the css specific code (lang-css.js). You can place the script tags either in the head section or at the end of the document... both work but placing at the end of the document will speed up the page load.
<script src="/js/google-code-prettify/prettify.js"></script>
<script src="/js/google-code-prettify/lang-css.js"></script>
You will also need to ensure that you are linking the stylesheet in the head of your document.
<link rel="stylesheet" type="text/css" href="/css/prettify.css">
You also need to add the correct classes your pre tag(s). The syntax-highlighting functions contained in lang-css.js will not be called without adding the class "lang-css" to the <pre> tag.
<pre class="prettyprint lang-css linenums">
Finally, make sure you call the "prettyPrint()" function on page load.
<body onload="prettyPrint()">
So in all my failed attempts to get jQueryUI working, I have tried this example here after downloading a theme from the jQueryUI site.
and here is my code looking at that example in the link above in my asp.net mvc page.
<link type="text/css" href="<%= Url.Content("~/Scripts/jquery-ui/css/smoothness/jquery-ui-1.8.17.custom.css")%>" rel="stylesheet" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-1.7.1.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-ui-1.8.17.custom.min.js")%>"></script>
<script>
$('#dialog_link').click(function(){
$('#Dialog').dialog('open');
return false;
});
</script>
<p id="dialog_link">Open Dialog</p>
<div id="Dialog" title="Dialog title!">
This content shown within dialog...
</div>
After hitting F5 I would have expected to see a clickable text which when clicked would bring up a modal dialog with a [x] button to close it and get back to the main window. However what I get to see is this on page load,
where the text 'open dialog' does not respond to click events and the supposed "modal dialog" is already visible in the form of a plain string and without any formatting. So where did all the magic of jQueryUI go? Something wrong in my linking correct scripts?
Totally lost. Please help..
Edit
This exact same code works in pure html mode in a different file. when I copy this code into my asp.net mvc page within the content tags I get a javascript error at a non-descript line!!
Just take the 'open' out of your $('#Dialog').dialog('open'); and you are good to go.
Edit: Added this jsFiddle with your code as an example:
http://jsfiddle.net/DoomHamster/LhJsL/1/
Also, you don't need 'return false' when clicking an element with no default click event.
EDIT: From your comment below I suspect that you are having issues with loading jQuery and jQueryUI in the first place. Try replacing your script and css links with the following as a test to eliminate path issues:
<link type="text/css" rel="Stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
Try this
$(function()
{
$('#dialog_link').click(function(){
$('#Dialog').dialog();
return false;
});
})
I'm using SyntaxHighlighter for blogger to format the code snippet I use in my blog. I followed steps given in a blog (http://concise-software.blogspot.com/2010/03/enabling-syntaxhighlighter-in-blogger.html) but then it throws error on page load of my blogger post saying "Can't find brush for : CSS"
Got solution from another thread on stackoverflow
Formatting code snippets for blogging on Blogger
For others looking for a solution to this problem - Make sure you're referencing the shBrushCss.js library from within your <head></head> tag like so:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
Also, you can checkout this answer's source at http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html
It's a really easy to follow blog that I wrote that covers adding syntax highlighting to your Blogger Blog from top to bottom in a few easy steps (with screenshots).
If you run a blogger blog, you can follow the following steps explained bellow to integrate the SyntaxHighlighter.
I've nicely explained: How to Add Syntax Highlighter to Blogger
I wrote in the end of template head section this:
<link href='http://alexgorbatchev.com/pub/sh/current//styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js'/>
<script>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
SyntaxHighlighter.all();
</script>
Next i wrote in my articles:
<pre class="brush:bash">
ls -al | grep .jpg
</pre>
You can example here see.