adding an anchor in octopress post - html

I am using Octopress and I know that in order to add an image in my post, instead of writing:
<img src="src" alt="alt" class="class" />
I can write:
{% img class src alt %}
And, instead if writing:
text
I can write:
[text](href)
But how can I write:
text
?
If this is not possible and the only solution is to write the html tag, where and how can I add ruby code translate this for example: [text](href target) to this: text?
In addition, where can I find a list of all those html octopress shortcuts?

This is actually controlled by the Markdown engine used to process the text rather than any Octopress code. Depending on the engine you are using, you can write
[text](href){: target="target" }
This is called an "inline attribute list", and is an extension to the Markdown syntax. It is supported by Maruku, as well as Kramdown.
(Note that Maruku is Jekyll's default Markdown engine, so this syntax is supported if you haven't touched this aspect of the configuration.)

Use the Markdown Syntax:
[text](#target)
For text
[text](href){: target="target" }

The {% img class src alt %} is a octopress tag, see the plugin docs for more tags.
The [text](href) follow the markdown sintax, and does not let you add classes, attributes, or ids to elements.
So to workaround the target problem use the snipet below in your custom header layout, and added the #_blank anchor at the end of the url, to open in a new window.
<script type="text/javascript">
function addBlankTargetForLinks () {
$('a[href^="http"],a[href*="#_blank"]').each(function(){
$(this).attr('target', '_blank');
});
}
$(document).bind('DOMNodeInserted', function(event) {
addBlankTargetForLinks();
});
</script>

Related

How to center an image using blogdown?

So I am building my first data blog with RStudio and Blogdown and I am seriously stuck on something small but infuriating.
https://data-issues.netlify.app/
Above is the site I am building. I made a logo for it but I would like to make this centered. How would I do so in my markdown (.md) file.
Code here:
---
# Homepage
type: widget_page
# Homepage is headless, other widget pages are not.
headless: true
weight: 1
design:
columns: "1"
---
{{< figure src=/datavision.png theme="light" class="center">}}
EDIT: added this too to no avail
<p align="center">
![datavision](datavision.png)
</p>
I am using .md files, so where exactly would I define the shortcode for p if not here?
As #YihuiXie said in the comment section below, you don't really need to use a shortcode for raw HTML, there are multiple solutions that you can use.
Edit your config to use raw HTML in Markdown
In your config.toml enter:
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
If you have in your project config.yaml use this:
markup:
goldmark:
renderer:
unsafe: true
This enables raw html support in markdown files, in this way you don't need to use shortcodes.
https://gohugo.io/news/0.60.0-relnotes/
Raw HTML using Shortcodes
Depending how your project is structured, there should be some kind of layouts folder. I have a project made with Hugo and I have a something like this ../layouts/shortcodes/rawhtml.html with this code:
{{.Inner}}
For example in your code you're already using a Hugo’s Built-in shortcode. After you create the file, you just need to insert your shortcode in this way in your Markdown:
{{< rawhtml >}}
<img src=/datavision.png class="center">
{{< /rawhtml >}}
The custom CSS code should be defined in ../static/css/, in your config.toml, simply check if there is a variable to set your custom CSS code, for example:
# Custom CSS
customCSS = ["/css/custom.css"]
I used this configuration because the theme required it, but it can be different in your project so keep this in mind. If you don't want to use another file to save your CSS code, you can simply insert it into your shortcode like I did with the HTML, for example:
{{< rawhtml >}}
<style>
.center{
/* your code here */
}
</style>
{{< /rawhtml >}}
Use HTML for content pages instead of Markdown
With Hugo, you could also use a HTML instead of a md file in your project. It simply follows the same syntax, but you have to use HTML instead of the Markdown syntax, for example:
---
title: "Contact me"
---
<p>
Some text here
</p>
In this case you don't need the shortcode from the moment you're already using a HTML.

Asciidoctor images that are links to the image

The following Asciidoc code creates an image (with suitable styling etc) such that if you click on it, you open the image:
image:./myimage.jpg[my alt text, role="my css styling", link="./myimage.jpg"]
Note the path to the jpg file ./myimage.jpg is duplicated. This is inelegant, invites typos, and if the path is long it can become quite inconvenient to maintain.
My question is this:
is there a neat way to achieve this effect that does not require duplicating the path to the image, so that the path to the image is included precisely once in the code?
Thank you.
This is possible by defining an attribute:
:myimage: ./myimage.png
image::{myimage}[my alt text, role="my css styling", link="{myimage}"]
(also note: :: instead of a single :).
This becomes something like the following when run through AsciiDoctor:
<div class="content">
<a class="image" href="./myimage.png"><img src="./myimage.png" alt="my alt text"></a>
</div>
This is obviously more text, but as you mentioned, maintenance (certainly for long file names or URLs to external images) becomes easier.
Be aware that the space between :myimage: and ./myimage.png is required.
Also, if you redefine the attribute later in the document, it will only impact the next uses of the attribute. Thus,
:myimage: ./myimage.png
image::{myimage}[my alt text, role="my css styling", link="{myimage}"]
:myimage: ./myimage2.png
image::{myimage}[my second alt text, role="my css styling", link="{myimage}"]
will render two different images: the second attribute definition doesn't override the first one.
Though one may prefer different attribute names in such cases.
I couldn't see how to do this in pure Asciidoc and would still welcome input on the matter. In the meantime, I worked around the problem.
I'm in Jekyll so I used a Liquid template. I placed a file myimage in the _includes directory
image:{{ include.p }}[{{ include.t }}, link="{{ include.p }}"]
and invoked it with
{% include myimage p="image-name.jpg" t="alt text" %}
This is actually a slight simplification. In full, myimage is
[.cssstyling]#image:{{ include.p }}[{{ include.t }}, link="{{ include.p }}"]{% if include.c != null %}_{{include.c}}_{% endif %}#
and the invocation is one of the following:
{% include myimage p="image-name.jpg" t="alt text" %}
{% include myimage p="image-name.jpg" t="alt text" c="optional caption" %}

jekyll not linking to internal posts

Just started jekyll, and I want to display a link to one of my posts on the index.html page. I looked through the documentation and the following code appears to be what I'm suppose to do.
The following is in index.html
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
but it simply displays
.....
[Hello World]({% post_url 2015-01-19-soccer %})
.......
what am I doing wrong?
Since you used a mix of Markdown and HTML, which is causing the markdown processor to ignore anything in between the HTML blocks.
Markdown is also sometimes not processed when you have HTML right above the Markdown. (This is the case for you, since your example shows you have closed off the <p> tags)
There are a few ways around this.
Make sure there is a newline in between any HTML and Markdown, this will not show up as a <br> or a <p> in the final output, but rather ensures that the processor will convert the Markdown correctly.
So you should have something like this:
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
Notice the extra line there between the first <p></p> and the Markdown.
Use only HTML (this is as answered by user #topleft)
Use only Markdown, since <p> tags are supported.
Try the markdown=1 HTML attribute.
Markdown processors like Kramdown allow you to add an explicit tag to tell the processor to go through HTML blocks and process any Markdown there. I'm assuming you're using the default (which I believe is Redcarpet) and couldn't find the links on whether this is supported. But you can try this:
<div id="someDiv" markdown=1>
[This is a Markdown link that will be parsed](http://www.example.com)
</div>
You are using markdown language here, it won't work in html. You need to use that instead :
Hello World
site.baseurl default is empty
you can change it in _config.yml to suit your needs
for instance :
baseurl: "me/blog"

How to configure CKEditor to allow html block-level tags to be wrapped in an anchor tag

I would like to wrap a few block tags in a link (valid in HTML5):
<a href="http://example.com">
<div>foo</div>
<p>bar</p>
<span>baz</span>
<strong>zoom</strong>
</a>
But CKEditor rewrites the code such that the links are placed inside block tags and allowed to wrap inline tags as the above code is replaced with the following:
<div>foo</div>
<p>bar</p>
<span>baz</span> <strong>zoom</strong>
How can I disable this behavior?
In the CKEditor config, I'm using config.allowedContent = true; which disables the filtering of allowed tags.
We're also using config.autoParagraph = false; to not require root-level tags to be wrapped in a paragraph.
I've tried using config.extraAllowedContent = "a p; a div";, but this doesn't seem to have any effect.
You can try doing something similar to this:
CKEDITOR.dtd.a.div = 1;
CKEDITOR.dtd.a.p = 1;
src:
http://ckeditor.com/forums/Support/CKEditor-wont-allow-inside
At the moment CKEditor (4.2) is xHTML/HTML4 editor only. There's no support support for HTML5 DTD (which is dynamic, BTW) and this is the root of your problem. I'm also afraid there's no workaround/config since different DTD means different parser, so CKEditor is not the right tool for you. Sorry.
You can find more information in this ticket.

Write html tag with Markdown?

In tumblr, markdown is supported.
I try to add a syntax high lighter(highlight.js) in my tumblr, but got some problem.
highlight.js need adding a class attribute in HTML code tag.
I try to write a article like this in my tumblr :
<pre class="test">
<code class="html">
function A(){ return "hello world"; }
</code>
</pre>
The result in real page:
<pre>
<code>
function A(){ return "hello world"; }
</code>
</pre>
The class attribute is gone......
Is there possible adding a HTML attribute in Markdown?
If you use google-code-prettify, you could do this (I am currently doing this):
$(document).ready(function() {
$('pre').addClass('prettyprint');
prettyPrint();
});
Basically, you load all the files:
prettify.css
sunburst.css // optional styles
prettify.js
Add the code snippet above, and call prettyPrint onLoad: onload="prettyPrint()".
The code snippet above should go before all the files. It finds all pre elements, and appends the prettyprint class to it so that the script knows to style it.
If, however, you wanted to use your current syntax highlighter, you could do something like this (using jQuery):
$(document).ready(function() {
$('pre').addClass('test');
$('code').addClass('html');
// code to intialize highlight.js
});
I just tried, it was not difficult.
http://softwaremaniacs.org/soft/highlight/en/description/ describes in the first code snippet what you need to plug into the html of your tumblr page to make it work. The code snippet will not load with highlighting in the preview mode.
To be able to use the highlighter you need to be able to link the stylesheet and the javascript. If you don't have hosting then the guys of highlight.js offer a hosted solution for free.
Add these 3 lines inside your <head>...</head> tags
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.2/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
All I added to my code post on the tumblr was
<pre><code class="language-python">
...your code here...
</code></pre>