Code Notes – A Gatsby theme for publishing code-related notes

栏目: IT技术 · 发布时间: 4年前

内容简介:Like a lot of developers I spend a lot of my time searching Google for answers to things that I should know how to do. For example, how to write atag from memory.. apologies if that triggers some of you :joy:. Rather than keep searching for answers to prob

Like a lot of developers I spend a lot of my time searching Google for answers to things that I should know how to do. For example, how to write a

link

tag from memory.. apologies if that triggers some of you :joy:. Rather than keep searching for answers to problems that I've solved many times in the past, I started making notes so that I could easily reference them.

These code-related notes included snippets; examples from previous projects; explanations of how/why/when to do something; and even straight-up duplications of some

documentation

that I often search for. I have tried quite a few apps and services; some had great features like having a menubar app that allowed me to easily search then paste in a certain snippet, some had great organisation capabilities, and others were allowed for multiple snippets per note. Unfortunately though, none had all the features of what I wanted from a code notes app so I decided to create my own and this post will give you a little insight into how my solution was made and works.

I created Code Notes , a theme for Gatsby that gives you all the control over how you write, publish and store your notes — you have full ownership. Having it be a website was immediately appealing to me because it is searchable and shareable by default; I often found myself sending colleagues a link to one of my notes.

Code Notes – A Gatsby theme for publishing code-related notes

GitHub hosts my notes which means the notes are versioned using Git so others can fork my notes or I can revert if needed.

Code Notes – A Gatsby theme for publishing code-related notes

All notes are written in MDX or markdown. MDX is an extension of markdown that enables you to write JSX or HTML within the notes and they will render. This means the notes can be interactive, so you can show a code snippet and a preview right next to each other :rocket:. iframe s can also be added so gists, Codepens or even Figma designs can be included in your notes.

Notes are fully searchable too :mag:, including all code snippets. I integrated Flexsearch and made a few optimisations to improve the search speed — I'll write a blog post about that soon.

Code Notes – A Gatsby theme for publishing code-related notes

The design of this theme is intentionally simple to allow for the notes to be as legible as possible. There are multiple themes: light and dark of course.

Code Notes – A Gatsby theme for publishing code-related notes

Notes also look great on mobile:

Code Notes – A Gatsby theme for publishing code-related notes

How do you make your own notes site?

If you're familiar with Gatsby, setting this theme up shouldn't be too hard. That being said, even if you're new to Gatsby, I think you should be able to set it up fairly easily. I created a Gatsby starter for just this purpose. Using the gatsby-cli , run this:

sh

gatsby new code-notes https://github.com/MrMartineau/gatsby-starter-code-notes

This will create a basic site with a single note. Once installed or cloned locally and all packages are installed you can begin developing your site.

If you'd rather not use the gatsby-cli , you can clone the start repo like so:

sh

git clone git@github.com:MrMartineau/gatsby-starter-code-notes.git code-notes

cd code-notes

yarn

Creating your first note is pretty simple too, just add a new file e.g. my-note.mdx inside the notes directory and add this content:

md

---

title: My note

emoji: :whale:

tags:

- test

link: https://zander.wtf

This is a test note.

I have been adding features over the past few months and now believe that it is ready for wider usage. Please give it a try and let me know what you think, I would love to hear any and all feedback. Code Notes is open source (of course) so you can contribute or file bugs to it at github.com/mrmartineau/gatsby-theme-code-notes .

If you're interested, here's some info about some of the previous apps I used.

Notion is perhaps an unlikely contender for an app of this sort, but it actually suited me pretty well for about a year. Search, tagging and syntax highlighting worked great, but it was slow to use and I became frustrated. I do recommend it if you already use it.

SnippetsLab ($9.99), Quiver ($9.99) and Boostnote (free) served me very well for a few years. They are purpose-built for storing code snippets and were quick, but notes were not as accessible as I would want and there was no preview.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

期货趋势程序化交易方法

期货趋势程序化交易方法

马文胜 编 / 中国财政经济 / 2008-1 / 42.00元

《期货趋势程序化交易方法》可作为学习期货行业的教程。中国期货行业非常重视期货人才队伍的建设,无论是在抓紧推进期货分析师的认证体系建设、提升期货分析师的执业水平上,还是在专业人才的后续教育上。 要想在期货市场上长期生存并保持稳定的获利,必须在充分认识市场的基础上,建立一个有效的系统化的手段和程序化的方法,把一切的复杂性和不确定性全部加以量化,使所有的交易有序而直观,才能最终达到低风险、低回报。一起来看看 《期货趋势程序化交易方法》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具