so what I want is on a given H1 main title to have an icon on the left-hand side. Unfortunately, so far I did not find any way to achieve this. One potential variant is to write bare bone HTML for both, however, I don't get the benefit of the markdown inside the title.
Does anyway know any better way to do this?
First to show what I actually want is this (this was done with picture editor for demonstration):
I have tried this:
# Quite a long title, potentially going over several lines
Quite a long title, potentially going over several lines
This does not work at all
{:style="float: right;margin-right: 7px;margin-top: 7px;"}
# Quite a long title, potentially going over several lines
{:style="float: right;margin-right: 7px;margin-top: 7px;"}
Quite a long title, potentially going over several lines
Using html like so, does not recognize the markdown:
<p align="center">
</p>
Using direct html also:
<div style="float: left;"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="128" height="128"/></div>
# Quite a long title, potentially going over several lines
Here if the title is not on a new line it is not recognized as markdown.
EDIT The suggested answer looks correct on stackoverflow, but on my github it looks like this:
The question is can we make the title to be aligned with the top of the image?
I used image html tag and a space before the header for my GitHub project repository README.md file. to set my image on the left and title on the right. Here is the code for it.
<img align="left" width="80" height="80" src="https://raw.githubusercontent.com/akarsh/akarsh-seggemu-resume/master/akarsh%20seggemu%20resume/Assets/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60%403x.png" alt="Resume application project app icon">
# Resume application project
This is how it looks,
You can see the project readme by clicking on this link to the GitHub repository
Bad news, GitHub does not support the full set of HTML elements in a README.md file. Here is a write-up about what is supported. I also found out a bit more in this StackOverflow question from 4 years ago.
One of the resources mentioned in that question is this whitelist.
If it worked, what you would need is similar to what is below, which I have kept for your reference. The description is aimed at your problem description. Unfortunately, it looks like GitHub overrides the style attribute, replacing it with width: 100% and forcing the text to wrap below the image.
What should work (but doesn't): The style is attached to the image itself. Attaching it to the div affects the entire div. Note: the <h1> consists of both the image and the text.
<h1> <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"
width="128"
height="128"
style="float:left;">
# Quite a long title, potentially going over several lines and on and on and on and on and on and on and on and on and on
Related
I'm writing a wiki page on GitHub, and I'm using Markdown.
My problem is that I'm putting a large image (this image is in its own repository) and I need resize it.
I have tried different solutions, but they do not work:
![image](http://url.to/image.png "Title" {width=40px height=400px})
[[http://url.to/image.png = 250x]]
Is there a way to get it?
It is preferable without HTML.
Updated:
Markdown syntax for images (external/internal):
HTML code for sizing images (internal/external):
<img src="https://github.com/favicon.ico" width="48">
Example:
Old Answer:
This should work:
[[ http://url.to/image.png | height = 100px ]]
Source: https://guides.github.com/features/mastering-markdown/
On GitHub, you can use HTML directly instead of Markdown:
<img src="http://url.to/image.png" align="left" height="48" width="48" >
This should make it.
Resize by Percentage width=50% height=50%. Example:
<img src="https://i.imgur.com/ZWnhY9T.png" width=50% height=50%>
Resize by Pixels width="150" height="280". Example:
<img src="https://i.imgur.com/ZWnhY9T.png" width="150" height="280">
Some tips
To get a githubusercontent link for an image, drag and drop the image into any issue, and copy/paste the url from the code that is automatically generated. Example code: 
There is no way to change the size of an image if the markdown format is of the form []() - so stop looking right now! - you must use <img> instead
Another useful summary of conventions that do and don't work here
All of the above is from here
Almost 5 years after only the direct HTML formatting works for images on GitHub and other markdown options still prevent images from loading when specifying some custom sizes even with the wrong dimensions.
I prefer to specify the desired width and get the height calculated automatically, for example,
<img src="https://github.com/your_image.png" alt="Your image title" width="250"/>
I have used methods described above. Now I am using the method which is a way similiar but more simple to me.
First create add README.md file to your project.
Then upload screenshoots or whatever description images needed to your project main directory.
After uploading image Assets use html to refer these assets directly without using link like below
Like this:
<img src="icon.jpg" width="324" height="324">
<p align="center">
<img src="screen1.png" width="256" height="455">
<img src="screen2.png" width="256" height="455">
<img src="screen3.png" width="256" height="455">
</p>
On above example I have used paragraph to align images side by side. If you are going to use single image just use the code as below
<img src="icon.jpg" width="324" height="324">
Have a nice day!
GitHub Pages now uses kramdown as its markdown engine so you can use the following syntax:
Here is an inline {:height="36px" width="36px"}.
http://kramdown.gettalong.org/syntax.html#images
I haven't tested it on GitHub wiki though.
You can tried to put the image into table of markdown, like this:
|  |  |
| --------------------------------------- | --------------------------------------- |
|  | |
it will make the image layout like grid, but it could not custom for each single image size.
This addresses the different question, how to get images in gist (as opposed to github) markdown in the first place ?
In December 2015, it seems that only links to files on
github.com or cloud.githubusercontent.com or the like work.
Steps that worked for me in a gist:
Make a gist, say Mygist.md (and optionally more files)
Go to the "Write Comment" box at the end
Click "Attach files ... by selecting them"; select your local image file
GitHub echos a long long string where it put the image, e.g.
Cut-paste that by hand into your Mygist.md.
But: GitHub people may change this behavior tomorrow, without documenting it.
I am trying to make a website that has a contents page.
I use the go to chapter 1 as the contents part,
and when it clicks it does to the <a name="chapter1"><u>Chapter 1</u></a>
This works well, but there's 1 catch (there's always a catch)...
I want to make it look like the ones on Wikipedia:
[View Image][1]
[1]: http://crystalanalysis.anydns.com/images/wikipedia_contents.png
But I didn't want to copy the one from Wikipedia, I wanted to make my own,
I looked around, found the parts I needed and had 2 problems! The first problem I am
having has something to do with the Indent. I tried using the p.indent {text-indent:150px}
but it only did the indent for the line I put it before. So:
Indented text
But it was annoying having to put the Indented text before every single line in the
contents box, but it works:
<header>
p.contenttitle {text-indent:50px;}
p.contentsub {text-indent:100px;}
</header>
<body>
<div style="background-color:#FFFFFF;width:1024;border:solid 1px #000000;"><br>
<font class=Blackverdana><b>Contents:</b><br></font>
<div align="left">
<!-- CONTENTS a href --><font class=Blackverdana>
<p class=contenttitle>Chapter 00: First things first...
<p class=contentsub>Chapter 0.2 Finding the SDK for your game
<p class=contentsub>Chapter 0.3 Running the Hammer Editor
<p class=contentsub>Chapter 0.4 First Load<br><br>
</body>
The other problem I am having is that if you look at the contents page:
http://crystalanalysis.anydns.com/7-12-2013.html
you will see that there seems to be some sort of <br> after every line.
I did not plan to have those there, they just appeared. Maybe a connotation with the "p" tag?
Any help would be greatly appreciated
And also the website is a blog and I am making a Hammer Editor Tutorial if anyone was wondering.
So it seems that you aren't ending the tags when you first start them.. An example of this:
<p class=contenttitle>Chapter 00: First things first...
When in all reality it should be:
<p class=contenttitle>Chapter 00: First things first...</p>
That could be a possible issue, as well as you should really look into using a CSS page to reference your HTML. Creating a class/id will actually make that indentation process ten times easier. For more information on that I can provide a handy link from w3.org that can explain the entire process of using CSS and how it can make your life a lot easier!
http://www.w3.org/Style/Examples/011/firstcss.en.html
The CKEditor 4.3 demo show an example of widget for work with HTML5 figure tag.
As a user (editing the demo text) I can not edit a second figcaption (one before image, as "figure title", and other after image, as caption): when edit (by CKEditor's source code) before, it goes after, when I add a paragraph (p tag) before image, also goes after. So, there are no way to user express distinct "head-caption" and "foot-caption", always CKeditor put after image.
There are some configuration to enable "head-captions"?
The edited source code:
<figure class="caption" style="float:right">
<figcaption>HEAD - Test</figcaption>
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
So, CKEditor transforms into,
<figure class="caption" style="float:right">
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>HEAD - Test</figcaption>
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
Idem with <p>HEAD - Test</p>. If I use only the <figcaption>HEAD - Test</figcaption>, it also goes after image (impossible to express a "before img caption").
NOTE-1: "head" and "foot" figcaptions are both valid in HTML5, as showed in this fiddle.
NOTE-2: another problem is a caption with more than one paragraph. CKEditor transforms it in a BR, that is not what author need in a typical journal.
NOTE-3: for this related needs — use of paragraphs, use of "before image" caption, and use of two captions —, see all needs of a typical journal at an stable standard like JATS fig element, or millions of article examples at PMC.
Short answer - no, there is no config option for that.
Some details - you're using the image widget, which is supposed to handle figure.caption>img+figcaption case. Specific widget may not work with every possible input and it happens in this case.
If you want to remove that limitation there are two ways:
Don't use the image widget by disabling it or remove class="caption" from your HTML. For example this HTML will not be changed:
<figure>
<figcaption>1</figcaption>
<img src="..." ...>
<figcaption>2</figcaption>
</figure>
Also, the enter key will work in a standard way inside figcaptions (will create <p> tags).
The other way, if you want to use the image widget, is to modify its behaviour. In case of simple widgets it can be done without touching widget code, inn the widgetDefinition event listener. However, image widget is pretty complex, so you'd have to change its code.
To change enter key behaviour, just change the widgetDefinition.editables.caption.allowedContent - it has to contain a p tag. This part can be done in widgetDefinition listener.
In order to be able to use two captions, you'd have to add another nested editable and modify the plugin code, because it handles only img+figcaption case.
Ok, first of all I'm sorry if my question appears unclear as I'm going to find it hard to explain. I don't know if you guys help with the coding at all but if you could set me off in the right direction that would be great.
Overview-
Basically similar to that of YouTube where on the side panel under "recommended >>" There is a single column with different rows. On each row there is a <div> element which contains a picture, title, who uploaded it and views. So these different parts so the title picture etc. are specific and link to that one video. I know the different videos that are recommended are based on numourous factors etc. But, anyway driving to the point here now-
Q- Is there a way of making the page load a random element or shall we say set for a video within a <div> tag?
I'll put up some code to demonstrate the basic layout:
<table>
<tr>
<td>
<div id="thumbnail">
<img src="thumbnail.png"
</div>
</td>
<td>
<div id="author">
<a> somebody </a>
</div>
</td>
... and so forth.
I have read up on how to make a random image come up upon load but is there a way of making a whole section or say a random style sheet come up on load? and each contain the different videos ( Just taking a stab in the dark here) or some sort of script?. Again I'm sorry if I'm sounded very vague or if I'm using the wrong terminology...
I had a very hard time trying to word what I wish to know how to do, nor could I locate any post or website from Google that had my answer probably due to not being able to word this correctly, but I will explain in fullest detail.
<br />
<hr />
<br />
Break, horizontal, break is my way of separating parts of the post from another. How can I group the three into one simple tag that can replace the three, thus saving me time and hassle .
It would be also helpful to know if there are ways to define tag groupings with more than just empty tags like a tag identified by the string title1 would be a tag containing all the format, text, and all sub-elements of the template that was coded somewhere else.
If this question has already been posted then I am sorry. Thanks!
You don't need the <br> tags because <hr> is a block level element and automatically creates a line break. If you're doing that to get some vertical space above and below thw <hr> why not just use CSS to give the <hr> some margin?
hr
{
margin-bottom: 20px;
margin-top: 20px;
}
Neither <br> nor the proposed alternative <hr> are particularly well-suited here.
You need to learn about CSS. All you need to do is apply appropriate styles (i.e. a margin) to the elements that wrap your posts.
<div class="post">
<h1>Post #1</h1>
<p>something</p>
</div>
<div class="post">
<h1>Post #2</h1>
<p>something else</p>
</div>
div.post {
margin-bottom: 3em;
}
If you are using HTML5 then use <article> instead of <div class="post"> to denote individual posts.
As for grouping tags, this is currently not possible in plain HTML, you need to apply some preprocessing for that. The usual solution is to use a content management system which creates the final HTML based on your content and an HTML template.
Whilst this specific problem can be solved with a little bit of CSS, it sounds like you need a layout or templating engine of some sort in the long run. I'm a rubyist by trade so my go-to solution for doing this is Jekyll.
What Jekyll does is generate static html files from layouts and content that you write. You can abstract a lot of the repetitive layout markup into separate files and then just reference them when you need them.
The following guide is a good place to get started: http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll/
If you're already working with another framework then do some reading around it first to see if there's something there you can use. If you're just writing straight-up HTML/CSS though, then definitely give Jekyll a try.