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.


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

查看所有标签

猜你喜欢:

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

C++沉思录

C++沉思录

Andrew Koenig、Barbara Moo / 黄晓春、孟岩(审校) / 人民邮电出版社 / 2002-11-01 / 50.00元

《C++ 沉思录》集中反映了C++的关键思想和编程技术,不仅告诉你如何编程,还告诉你为什么要这样编程。本书曾出现在众多的C++专家推荐书目中。 这将是C++程序员的必读之作。因为: 它包含了丰富的C++思想和技术,从详细的代码实例总结出程序设计的原则和方法。 不仅教你如何遵循规则,还教你如何思考C++编程。 既包括面向对象编程也包括泛型编程。 探究STL这一近年来C++最重要的新成果的内在思想。一起来看看 《C++沉思录》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

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

RGB CMYK 互转工具