Custom CSS File for Readme.Md in a Github Repo

Custom css file for readme.md in a Github repo

GitHub does not allow for CSS to affect README.md files through CSS for security reasons (as if you could inject CSS into a ReadMe, you could easily launch a phishing attack). This includes both stylesheets referenced through <link rel> and inline styles used with <style>.

The readmes are in markdown syntax, so some styling can be done, such as adding colours through placeholder images, just like here on StackOverflow. For example, you can add red squares with the following:

- ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`

You can also make use of things like diff, json, html, js and css to affect text colouring.

Mix Github markdown language with CSS

After GitHub converts Markdown to HTML,

The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.

style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.

In any case, GitHub does not permit arbitrary HTML to be included in Markdown.

Referencing a .css file in github repo as stylesheet in a .html file

GitHub repos aren't web hosting, you should push that stuff up to a service specifically designed to serve files, like pages.github.com.

How can I use github to host an external CSS file?

You can host your files on Github Pages, Just go to repo settings[1], find "Github Pages" section and set your branch[2] and click "Save". You will se the info[3]. Then you go to https://YOUR-GITHUB-USERNAME/REPO-NAME (If you have index.html or any file eg. /src/css/style.css) You can load the CSS, JS or other files on any site

<link rel="stylesheet" href="path/to/file/style.min.css">

[1]:

---

[2]:

---

[3]:

Github markdown - cannot change any style by inline-css and class

This is not possible due to security concerns.

In fact, it is not related to Markdown, but rather GitHub's post-processing of all user provided markup, as documented in github/markup. The conversion of Markdown to HTML happens in step 1, which leaves your tags and attributes intact. However, of note is step 2:

2. The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class
   or id attributes.

A previous version of that document linked to the code for the HTML sanitizer they were using at the time. Whether they are still using that sanitizer or a different one is currently unknown. However, a review of the code for that sanitizer makes it clear that they are striping out all user defined styles. If they have updated to a new sanitizer, it is likely that it has been made more strict.

In conclusion, it is clear that GitHub does not allow any user-defined styles to be used on their site.

Use custom font in GitHub pages

You have to provide the Relative Path to the file,

For Example Take This Directory Structure:

- root
  - system-files
  - vahid
    - github-pages
      - resources
        - Samim.ttf
      - README.md
      - index.html
      - styles.css

Here the "root" is the Drive On which your Operating System is Stored On, and "system-files" contains your Operating System's Important Files and finally you have this folder "vahid" which contains the user's files, and inside "vahid" you have "github-pages" folder where all your github pages code is stored.

In Path the / means the root, in Windows take this as like if you open C:\ in Windows Explorer.

And this period . means current directory, and when you use ./ instead of / you're specifying a path to a file/folder in current Directory.

Now when in my styles.css if I use this Path /resources/Samim.ttf what it means is "Samim.ttf" File in inside of the "resources" folder in the root directory.

Did you notice something? Let me try to show this path in the directory Structure.

- root
  - resources
    - Samim.ttf

As you can see the Path we specified doesn't exist, try to compare it to the Real Directory Structure Given Above.

So instead of using / we have to use ./ because the "resources" folder is in the same folder as of the "styles.css".

So you have to replace your Absolute Path with Relative Path, which will be this:

• ./resources/Samim.ttf

Read More About Relative And Absolute Path At LinuxHandBook.com

Add github accounts to readme file

You can try this code:-

Here is my CSS:

.photos {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

Here is my HTML:

<div class="photos">
<a href="Github Profile url"> 
  <img href="Github profile image source"> 
</a> 
<div class="photos">
<a href="Github Profile url"> 
  <img href="Github profile image soure"> 
</a> 
<div class="photos">
<a href="Github Profile url"> 
  <img href="Github profile image source"> 
</a> 
<div class="photos">
<a href="Github Profile url"> 
  <img href="Github profile image source"> 
</a> 
</div>

For Displaying the word "Authors" you can use

##Authors

---

Related Topics