Code Monkey home page Code Monkey logo

Comments (32)

mjedmonds avatar mjedmonds commented on May 21, 2024 5

Would also love to see this!

from notable.

nc-dtan avatar nc-dtan commented on May 21, 2024 1

@umgupta that's what I realised, but sinde I use the executable and don't build from source, I will need a new release containing this commit.

from notable.

umgupta avatar umgupta commented on May 21, 2024 1

Right now you have to use \( \) for inline rendering. That is default setting. $$ $$ and \[ \] work for normal math.

from notable.

fabiospampinato avatar fabiospampinato commented on May 21, 2024 1

@nc-dtan I've improved the tutorial about KaTeX by using something similar to your provided code: https://github.com/fabiospampinato/notable/blob/master/resources/tutorial/notes/05%20-%20Notes.md/#katex

Thank you.

from notable.

fabiospampinato avatar fabiospampinato commented on May 21, 2024

It seems there's an extension for showdown (the markdown renderer we are using) already: https://github.com/obedm503/showdown-katex

Support for this should be easy, thanks for the suggestion!

from notable.

umgupta avatar umgupta commented on May 21, 2024

Hi! I tried to implement this. However, showdown-katex as published on npm registry is old (0.0.5) and doesn't work.

I think (haven't tested) the newer version on the github repo works and can be used. Do you have any policy on how to "copy" this repo into the code as it can't be put into node-modules?

I can also just look at the code and copy the relevant code as an extension.

LMK

from notable.

fabiospampinato avatar fabiospampinato commented on May 21, 2024

@umgupta Actually you can install packages with NPM from a git repo, look here for instance, would that be enough?

from notable.

umgupta avatar umgupta commented on May 21, 2024

@fabiospampinato Thanks for the suggestion! I found https://www.npmjs.com/package/showdown-katex-studdown which is v0.4.0 of the same package. However, the rendering is off (see https://imgur.com/dpMMIOT)

The corresponding markdown text is

# Python Notes

`__all__` :


$$x= \frac{-b\pm\sqrt{ b^2-4ac }} {2a}$$

$$a=a+b$$

In particular, it tried to render twice, first with "$$" stripped and later it tries to render latex but fails.

from notable.

samueldy avatar samueldy commented on May 21, 2024

Would like to second this request. In addition to direct access to the .md files for version control, encryption, etc., this would make Notable a great option for laboratory notebooks.

from notable.

will-hart avatar will-hart commented on May 21, 2024

It is fairly easy to manually call KaTeX rendering, see https://github.com/will-hart/markdown-server/blob/master/templates/app.hbs#L96 for an example.

from notable.

umgupta avatar umgupta commented on May 21, 2024

@will-hart Thanks, I was thinking to call katex directly too. Will do :). Thanks!

from notable.

fabiospampinato avatar fabiospampinato commented on May 21, 2024

Thank you @umgupta for implementing this!

from notable.

nc-dtan avatar nc-dtan commented on May 21, 2024

Hi all, is there an example on how to use this? Or maybe the release I got is just not including this (I got the release for windows).
I tried writing this without any luck:

\\[ a^2 + b^2 = c^2 \\]

$$ a^2 + b^2 = c^2 $$

from notable.

nc-dtan avatar nc-dtan commented on May 21, 2024

That seems to exactly be the case. Here are the commits not in the most recent version v1.0.1.

from notable.

tilmanginzel avatar tilmanginzel commented on May 21, 2024

There seems to be typo in config.ts#L47, delimilters instead of delimiters. I wasn't able to test it yet but assume that the default config will be used instead.

from notable.

umgupta avatar umgupta commented on May 21, 2024

@nc-dtan You don't have the updated version, hence it won't work as of now. Use master branch to use this feature.

from notable.

elegracer avatar elegracer commented on May 21, 2024

@fabiospampinato as @tilmanginzel pointed out, there is a typo in https://github.com/umgupta/notable/blob/e05b6e90ea8b0917e7ac9e350d9ccd469b139e10/src/common/config.ts#L47 where it should be delimiters instead of delimilters.

Correcting this type gives the expected result.

from notable.

fabiospampinato avatar fabiospampinato commented on May 21, 2024

@joueurh this is fixed in the master branch.

from notable.

mjedmonds avatar mjedmonds commented on May 21, 2024

Would it be possible to have $...$ as a default delimiter for inline latex? See: https://stackoverflow.com/questions/27375252/how-can-i-render-all-inline-formulas-in-with-katex

from notable.

umgupta avatar umgupta commented on May 21, 2024

@fabiospampinato I think @mjedmonds has a fair request. Do you have a place where people can configure "preferences"?

from notable.

fabiospampinato avatar fabiospampinato commented on May 21, 2024

@umgupta not yet, but I hope to release something about this in the next couple of releases.

from notable.

elegracer avatar elegracer commented on May 21, 2024

Is is really fixed now? I found that in the master branch it's still delimilters... @fabiospampinato

from notable.

elegracer avatar elegracer commented on May 21, 2024

@mjedmonds you can achieve that if you modified delimilters to delimiters, and add a line right below the first delimiter setting, as:

katex: {
    throwOnError: true,
    displayMode: false,
    errorColor: '#f44336',
    delimiters: [
      { left: '¨D¨D', right: '¨D¨D', display: true }, // showdown converts `$$` to `¨D¨D`
      { left: '$', right: '$', display: false },
      { left: '\\(', right: '\\)', display: false },
      { left: '\\[', right: '\\]', display: true },
      { left: '~', right: '~', display: false, asciimath: true },
      { left: '&&', right: '&&', display: true, asciimath: true }
    ]
  }

in src/common/config.ts

from notable.

fabiospampinato avatar fabiospampinato commented on May 21, 2024

@joueurh yes, sorry I forgot to push the relevant commit.

from notable.

elegracer avatar elegracer commented on May 21, 2024

Thank you so much! This app is just amazingly useful!

from notable.

nc-dtan avatar nc-dtan commented on May 21, 2024

@fabiospampinato, do you know when you will make the next release?

from notable.

umgupta avatar umgupta commented on May 21, 2024

@nc-dtan I think V1.1 is already out which has the needed changes.

from notable.

nc-dtan avatar nc-dtan commented on May 21, 2024

@umgupta that is true. Works now :)
How does inline math work?

from notable.

nc-dtan avatar nc-dtan commented on May 21, 2024

Just in case someone is as slow as me, here are some examples:

# Playing with math

\\[ a^2 + b^2 = c^2 \\]

$$  a^2 + b^2 = c^2  $$

Here is som inline math: \\( a^2 + b^2 = 25 \\). Looks nice

from notable.

InnovativeInventor avatar InnovativeInventor commented on May 21, 2024

I would like inline LaTeX support with $ ... $.

from notable.

fabiospampinato avatar fabiospampinato commented on May 21, 2024

@InnovativeInventor this is implemented in the master branch.

from notable.

samueldy avatar samueldy commented on May 21, 2024

Thanks so much for this! I got inline and display formulas working in the master branch, but KaTeX seems to have spacing issues when rendering:

From the KaTeX homepage:
image

From master branch:
image

A few things:

  • The limits on the integral are slightly too high in Notable as compared to default KaTeX
  • There is no spacing around the = sign, between the function f and the exponential, and the \, between the exponential the d\xi seems to have been ignored completely.
  • The \hat that's supposed to go over just f goes over both f and the opening parenthesis.

Maybe something to do with configuration settings passed to KaTeX when it's first loaded?

Code used:

# Maths

Notable has KaTeX support. This supports both inline (\\(3x = 5\\)) and display equations:

\\[f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\\]

Inline expressions: \\( e = mc^2 \\), are supported too.

from notable.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.