felixhageloh / uebersicht

ˈyːbɐˌzɪçt

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Easiest way to style links in basic HTML widget?

minthemiddle opened this issue · comments

I want to give my links a different color in a basic pandoc-to-html that I render with Übersicht.
What's the easiest way to do?

What I use in the widget

  • I render a markdown to HTML with pandoc
  • I use `import { css } from "uebersicht"
  • I use dangerouslySetInnerHTML to display the rendered HTML
  • See full code in "Widget"

What I tried

  • Pass the CSS to pandoc with --css style.css
  • Add the style as <style> in the rendered output

Thanks for your help!

Widget:


import { css } from "uebersicht"

const parseCalendar = '/usr/local/bin/pandoc "file.md"';
export const command = parseCalendar;
export const refreshFrequency = 5000; // ms

export const className =margin: auto; padding: 30px 30px 20px; font-family: -apple-system; color: rgba(255,255,255,0.7); font-size: 16px; font-weight: 300; line-height: 1.5;

export const render = ({ output }) => (
<div dangerouslySetInnerHTML={{__html: output }} />
)

  1. I assume your className is wrapped in backticks (e.g. export const className = `margin auto; ... ` .) If it isn't, it should be.
  2. You can use emotion's nested syntax with className. With that, you can then style the links however you want.

For example:

export const className = `
  margin: auto; 
  padding: 30px 30px 20px; 
  /* the rest of your css */

  /* nested selectors */
  a {
    /* ... */
  }
`