W czym pisać tutoriale

1

Powiedzmy, że chciałbym zacząć pisać tutoriale. W formie tekstu. Z osadzonymi snippetami kodu w JS. Z możliwością odpalania tych snippetów. Czy są jakieś narzędzia, które mogłyby mi to ułatwić?

Przy czym chciałbym mieć workflow taki, że piszę normalnie apkę - np. jeśli uczę, jak zrobić grę w węża, to faktycznie robię tę grę w węża i na podstawie tego kodu jest generowany tutorial. Mogłoby to być rozwiązane przez jakieś adnotacje w komentarzach. Albo odwrotnie - być może cały projekt bym pisał np. w Markdown osadzając bloki kodu i same by się generowały pliki z kodem (chociaż myślę, że to gorszy pomysł).

W każdym razie zależy mi na poszanowanie zasady DRY. To, czego chcę uniknąć, to zrobienie apki, a później ręcznie wycinanie z niej kawałków kodu.

No i zależy mi, żeby to rozwiązanie było open source i kompilowało się do statycznych plików HTML/CSS/JS. No i żeby można było łatwo osiągnąć minimalistyczny design, bez rozmaitych śmieci. No i żeby to było proste w użyciu i rozszerzaniu.

Ktoś coś wie?

W sumie nie wiem pod czym szukać. tutorial software w Google pokazuje jakieś apki do tworzenia tutoriali video.

A może jakiś tool do tworzenia dokumentacji? Tylko nie chodzi mi właśnie o komentowanie "per funkcja", tylko o możliwość tworzenia własnych snippetów np. na takiej zasadzie:

// @snippet loop
for (let i = 0; i < 100; i++) {
   // @endsnippet
}

a potem osadzanie tego np. tak:

Tak możemy napisać pętlę: 
{{ snippet('loop') }}

ew. może jakiś tool do literate programming?

Pewnie skończę się tym, że sam napiszę jakiś własny tool, ale jestem ciekaw, czy ktoś już czegoś takiego nie wymyślił.

0

Powiedzmy, że chciałbym zacząć pisać tutoriale. W formie tekstu. Z osadzonymi snippetami kodu w JS. Z możliwością odpalania tych snippetów. Czy są jakieś narzędzia, które mogłyby mi to ułatwić?

Emaksowy Org-mode? Trochę ciężko się z tego jedynego powodu przesiadać na inny edytor, ale robi to co chcesz bardzo dobrze.

ew. może jakiś tool do literate programming?

To się powinno liczyć jako takie narzędzie — i jest na liście na Wikipedii.


EDYCJA 1: Minikurs tego, co chcesz zrobić.

1

Póki co zrobiłem bibliotekę do tego:
https://github.com/hex13/codeintros
ogólnie wyłapuję adnotacje w taki sposób, że zrobiłem prosty parser, który chodzi linijka po linijce i łapie regexpami adnotacje w formie

//@snippet nazwa
jakiś kod
//@endsnippet

tak jak tutaj: https://github.com/hex13/codeintros/blob/3e68d48fc0262d042068fbe731853ea1b9689025/examples/example1.js
później dane o snippetach są wrzucane jako zmienne dostępne w szablonie (który renderuję używając biblioteki Nunjucks, czyli libki inspirowanej Jinja-2).
Poza tym, że używam Nunjucks, to w szablonach używam też Markdownu, który następnie za pomocą biblioteki Marked renderuję do HTMLa.
Tak wygląda szablon: https://raw.githubusercontent.com/hex13/codeintros/3e68d48fc0262d042068fbe731853ea1b9689025/examples/example1.md

A tak to wygląda po renderingu: https://codeintros.netlify.app/

Natomiast jest to póki co PoC.

Zobaczę i na dłuższą metę albo jakoś to mocniej rozwinę, albo użyję czegoś gotowego. Zobaczę też ten org-mode.

0

Mógłbyś użyć .mdx, czyli pisać w formacie .md, tylko przy okazji osadzać w nim komponenty JSX. Mógłbyś mieć komponent, który parsuje swoje children i dodaje kontrolke do odpalenia ich.

Mogłoby to jakoś tak wyglądać:

## How to run code

To run code you must do `console.log()`, as described in  [docs](http://docs).

import Code from "./code";

<Code>
const a = code;
console.log(a);
</Code>

Używa tego np tailwind w swoich dokumentacjach: https://tailwindcss.com/docs/installation

0

A Jupyter notebook nie wystarczy? Tu masz języki które możesz osadzić : https://github.com/jupyter/jupyter/wiki/Jupyter-kernels
Tu jakiś przykład z JS https://nbviewer.org/gist/Fil/aec6cbf62f9b71c3407db87d5eb592e7/D3%20notebook.ipynb
A o widgety podłączysz jak się postarasz :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1