shades-of-purple-highlightjs
Version:
⚡ A professional theme with hand-picked & bold shades of purple 💜 to go along with your HighlightJS. A custom HighlightJS theme with style.
158 lines (108 loc) • 8.37 kB
Markdown
<div align="center">
<img align="center" src="https://on.ahmda.ws/t6yQ/c" />
<h1 align="center">Shades of Purple Theme for HighlightJS</h1>
[](https://github.com/ahmadawais/Emoji-Log/)
</div>
<br>
<table width='100%' align="center">
<tr>
<td align='left' width='100%' colspan='2'>
<strong><code>Shades of Purple (SOP)</code></strong><br />
A professional theme with hand-picked & bold shades of purple 💜 to go along with your HighlightJS. A custom HighlightJS theme with style.</a>
</td>
</tr>
<tr>
<td>
A FOSS (Free & Open Source Software) project developed by <a href='https://github.com/ahmadawais' target="_blank">Ahmad Awais</a>.
</td>
<td align='center'>
<a target="_blank" href='https://AhmadAwais.com/'>
<img src='https://i.imgur.com/Asg4d3k.png' width='100' />
</a>
</td>
</tr>
<tr><td><sup> Follow Ahmad's #FOSS work on GitHub <a href='https://github.com/ahmadawais'>@AhmadAwais</a> — Say Hi on Twitter <a href="https://twitter.com/mrahmadawais/">@MrAhmadAwais</a></sup></td><td align='center'>👋</td></tr>
</table>
<div align="center">
[](https://github.com/ahmadawais/shades-of-purple-HighlightJS/stargazers) [](https://github.com/ahmadawais?tab=followers) [](https://twitter.com/mrahmadawais/)
</div>
<br>
## Easy To Download
Download the `shades-of-purple.css` any where in your project. You can use command line to run the command below and it will download this css file in the folder you run this command in.
```sh
wget -qO shades-of-purple.css https://git.io/SOPHighlightHS
```
Or you can manually go to this link [Download shades-of-purple.css](https://git.io/SOPHighlightHS) and save it as `shades-of-purple.css` in your project.
<br>
## Usage
1. Copy [`shades-of-purple.css`](https://git.io/SOPHighlightHS) to your desired directory.
1. Include the theme in your html. <link rel="stylesheet" href="shades-of-purple.css">
In the end, your page should look something like this:
```html
<link rel="stylesheet" href="shades-of-purple.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<pre><code class="javascript">
// JS Functions
function shade(which) {
console.log(which, 'Shades of Purple');
}
</code></pre>
```
<br>
## Put `Shades of Purple` In Other Places!
I have built other `Shades of Purple` themes for different software. Here's a list.
- 💜 [VSCode theme](https://github.com/ahmadawais/shades-of-purple-VSCode) — Shades of Purple
- 💜 [iTerm2 theme](https://github.com/ahmadawais/shades-of-purple-iterm2) — Shades of Purple
- 💜 [Hyper™ theme](https://github.com/ahmadawais/shades-of-purple-hyper) — Shades of Purple
- 💜 [Konsole theme](https://github.com/ahmadawais/shades-of-purple-konsole) — Shades of Purple
- 💜 [Slack theme](https://github.com/ahmadawais/shades-of-purple-slack) — Shades of Purple
- 💜 [Alfred theme](https://github.com/ahmadawais/shades-of-purple-alfred) — Shades of Purple
<br>
#### **Hello, we're the [WordPress Couple](https://WPCouple.com)**!
I ([Ahmad Awais](https://twitter.com/mrahmadawais/)) am a Full Stack Web Developer and a regular core contributor at WordPress. My significant other ([Maedah Batool](https://twitter.com/MaedahBatool/)) is a Technical Project Manager, and she's also a WordPress Core Contributor. Together with our [team](https://WPCouple.com/team), we run the [WPCouple.com](https://WPCouple.com/).
If you'd like to get insights into our love for open source software, professional full stack development, WordPress community, the growth of JavaScript or growing a family, building, and bootstrapping a business, then subscribe to our premium newsletter called ↣ [The WordPress Takeaway](https://WPTakeaway.club)!
#### [**Support our Open Source Projects!**](https://pay.paddle.com/checkout/515568) 🎩
If you'd like us to keep producing professional free and open source software (FOSS). Consider [paying for an hour of my dev-time](https://pay.paddle.com/checkout/515568). We'll spend two hours on open source for each contribution. Yeah, that's right, you pay for one hour and get both of us to spend an hour as a thank you.
<br>
### Project Backers & [WPCouple Partners](https://WPCouple.com/partners) ⚡️
This FOSS (free and open source software) project is updated and maintained with the help of awesome businesses listed below. Without the support from these amazing companies/individuals, this project would not have been possible.
— _What/How? [Read more about it →](https://WPCouple.com/partners)_
<table width='100%'>
<tr>
<td width='333.33'><a target='_blank' href='https://www.gravityforms.com/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mtrE/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://kinsta.com/?kaid=WMDAKYHJLNJX&utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mu5O/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://ahmda.ws/USES_WPE?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mto3/c' /></a></td>
</tr>
<tr>
<td width='333.33'><a target='_blank' href='https://www.sitelock.com/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mtyZ/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://wp-rocket.me/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mtrv/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://blogvault.net/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mtph/c' /></a></td>
</tr>
<tr>
<td width='333.33'><a target='_blank' href='https://cridio.com/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mtmy/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://wecobble.com/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mtrW/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://www.cloudways.com/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mu0C/c' /></a></td>
</tr>
<tr>
<td width='333.33'><a target='_blank' href='https://www.cozmoslabs.com/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mu9W/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://wpgeodirectory.com/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mtwv/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://www.wpsecurityauditlog.com/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mtkh/c' /></a></td>
</tr>
<tr>
<td width='333.33'><a target='_blank' href='https://mythemeshop.com/?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/n3ug/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://ahmda.ws/USES_LiquidWeb?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mtnt/c' /></a></td>
<td width='333.33'><a target='_blank' href='https://WPCouple.com/contact?utm_source=WPCouple&utm_medium=Partner'><img src='https://on.ahmda.ws/mu3F/c' /></a></td>
</tr>
</table>
<br>
## License & Attribution
**Licensed** as MIT ⓒ [Ahmad Awais](https://AhmadAwais.com/).
Thanks to makers of [HighlightJS](https://github.com/highlightjs/highlight.js) and Icons8 for the icons in this readme.
_Follow me 👋 on Twitter_ → [](https://twitter.com/mrahmadawais/)