Online Editor, LaTeX, Codemirror & html div

[miraclehinn]

I have had a quick view at all the issues already exist, but still do not find the solution that i need.

Sorry, I am not a good web developer and know quite less about Grunt, Node.js and so on.
I have been a Android and iOS developer for some time and currently I want and start to learn to set up my own blog site and want to integrate one "HTML Presentation" component to my future site.

For finding the right component, i get to know impress.js, reveal.js, deck.js and so on.
My result are presented here: http://isjohnwong.appspot.com/post/6013787169619968
As a result, Strut is the only satisfying open source editor for html presentation i found.

And here are some of my needs,

1. Integrate Strut in my website
   This is exactly somewhat the same as issues Integrate with my website #321 and Integrate Strut in my website #319 .
   Well, to make it more clear, things like to host one copy of strut.io in my VPS. And i can use it under my blog domain.
   
2. Math Equation Support
   Comparing to MathJax, I prefer LaTeX. Somewhat like Latex / MathJax #151
3. Code syntax coloring and indenting
   Maybe integrad codemirror
4. Self-define html&css&js DIV box Support
   Somewhat like issue Add ability to insert raw html&js into slides #3 , but not for the whole slide, only for one area.

Here is a relatively better Commercial Version of HTML Presentation Online Editor, but unfortunately not open source. So i can not count on this.

Sorry again, seems a lot of needs. If fact, I am currently a senior in one University and after a month, i will finish all my exams and i intend to try to implement all the needs above if i can not find on already implemented solution.
Question is that, i am really just one beginner for web development. So is there anyone who can provide me some instruction or guide... THX!

BTW, I am considering using Python3&Django as back-end Programming language.

[mwcz]

Hi! I'll try to answer your questions. I have to guess at what you mean by "HTML Presentation component". I don't understand your exact use case, but I hope this is helpful nonetheless!

Integrate Strut in my website

To host Strut, all you need is a basic webserver (apache, nginx, etc). Follow the build instructions and copy the dist/ directory into a web-accessible directory.

Math Equation Support
Comparing to MathJax, I prefer LaTeX. Somewhat like #151

I've had really good luck with KaTeX. It's much faster than MathJax. All of them should be usable inside Strut. :)

Code syntax coloring and indenting
Maybe integrad codemirror

This is possible. People forget that Markdown is a superset of HTML. All you need to do is paste the codemirror component code into a Markdown slide.

Self-define html&css&js DIV box Support
Somewhat like issue #3 , but not for the whole slide, only for one area.

I'm not sure what you mean by "self-define", but I suggest using HTML and CSS (this is the web, after all!) to arrange things in your slides. Anything you can do with HTML/CSS/JS, you can do inside a Strut slide, so Strut has far more capabilities than people tend to assume.

[miraclehinn]

Thanks for mwcz.

Sorry for my poor English expression, to make it clear, i draw some simple picture:


And when I save, there should be another presentation in my Presentation Tab Page, "Presentation 4" or any name i provide.
I hope i have illustrated clear.

So For "Integrate Strut in my website",

I use only these static page? No need to add any backend code?

In fact, I am not sure about how the following four groups of files produce files under folder preview_export.

---produce--->


Is that done through Node.js or just front-end javascript. Sorry, i am still not clear about the client-side-only app means....

And I notice there are reveal folder and reveal.html under preview_export. Does that mean, Strut also support using reveal.js ?

[mwcz]

Ah, thank you for the explanation, I understand better now.

To answer your easiest question, there is no back-end code in Strut. It's a pure front-end/client/browser (whatever you want to call it) app. So yes, hosting Strut on your site is as simple as copying the HTML+JS+CSS+images onto your site.

I like your ideas for the Code, Math, etc buttons. It would require quite a bit of work to add those features, though. Personally, I prefer to just use the Markdown slides, where I can add anything I want. Code, Math, HTML, etc, can all be used now, by inserting them into Markdown slides. It isn't quite as simple as clicking a button, but it is possible, and much more flexible. My flexible, I mean that you can use whatever syntax highlighting library you want, whatever TeX library you want, instead of having to rely on the one that Strut would pick.

Lastly, I don't know if or how Strut uses reveal.js, but I see a lot of references to it in the source code (sorry, I am not the Strut author!).

[tantaman]

Strut used to support reveal but no longer does. Reveal ended up being more trouble than it was worth as new features had to be checked in reveal, impress and bespoke. Bespoke also provides most of the same features as reveal hence why reveal was dropped.

Mathjax is a commonly requested feature. If I had more bandwidth I'd add it or if anyone is interested in doing it I'd take their changes for it.

[flat-linex]

On Mathjax; I have seen by looking at the source of http://www.lsv.ens-cachan.fr/~schmitz/pub/impress.js that supporting Mathjax kind of amounts to linking to its site and introducing a rewriting function: how can I do this in Strut? Is markdown the way to go or is there a place where I can modify the 'template' of the presentation to pre-introduce the support I need?

Thanks a lot,

[mwcz]

You can include mathjax's js file by going to your first slide (or any slide, really) and including the script tag inside the Markdown content. Any HTML can be included inside the Markdown area, so there's no problem adding a <script src="mathjax.js"></script>.

Also, all slides are on the same "page", so you don't need to include it on every slide, only one. :)

[mwcz]

Here's an example presentation with MathJax content (save it as pres.json and import it into strut):

{
  "slides": [
    {
      "components": [],
      "z": 0,
      "impScale": 3,
      "rotateX": 0,
      "rotateY": 0,
      "rotateZ": 0,
      "index": 0,
      "selected": true,
      "active": true,
      "x": 700,
      "y": 333,
      "markdown": "# MathJax example\n\n<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>\n\n<math xmlns=\"http://www.w3.org/1998/Math/MathML\">\n  <mi>a</mi><mo>&#x2260;</mo><mn>0</mn>\n</math>,\nthere are two solutions to\n<math xmlns=\"http://www.w3.org/1998/Math/MathML\">\n  <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>\n  <mo>+</mo> <mi>b</mi><mi>x</mi>\n  <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>\n</math>\nand they are\n<math xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\">\n  <mi>x</mi> <mo>=</mo>\n  <mrow>\n    <mfrac>\n      <mrow>\n        <mo>&#x2212;</mo>\n        <mi>b</mi>\n        <mo>&#x00B1;</mo>\n        <msqrt>\n          <msup><mi>b</mi><mn>2</mn></msup>\n          <mo>&#x2212;</mo>\n          <mn>4</mn><mi>a</mi><mi>c</mi>\n        </msqrt>\n      </mrow>\n      <mrow> <mn>2</mn><mi>a</mi> </mrow>\n    </mfrac>\n  </mrow>\n  <mtext>.</mtext>\n</math>"
    }
  ],
  "activeSlide": {
    "components": [],
    "z": 0,
    "impScale": 3,
    "rotateX": 0,
    "rotateY": 0,
    "rotateZ": 0,
    "index": 0,
    "selected": true,
    "active": true,
    "x": 700,
    "y": 333,
    "markdown": "# MathJax example\n\n<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>\n\n<math xmlns=\"http://www.w3.org/1998/Math/MathML\">\n  <mi>a</mi><mo>&#x2260;</mo><mn>0</mn>\n</math>,\nthere are two solutions to\n<math xmlns=\"http://www.w3.org/1998/Math/MathML\">\n  <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>\n  <mo>+</mo> <mi>b</mi><mi>x</mi>\n  <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>\n</math>\nand they are\n<math xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\">\n  <mi>x</mi> <mo>=</mo>\n  <mrow>\n    <mfrac>\n      <mrow>\n        <mo>&#x2212;</mo>\n        <mi>b</mi>\n        <mo>&#x00B1;</mo>\n        <msqrt>\n          <msup><mi>b</mi><mn>2</mn></msup>\n          <mo>&#x2212;</mo>\n          <mn>4</mn><mi>a</mi><mi>c</mi>\n        </msqrt>\n      </mrow>\n      <mrow> <mn>2</mn><mi>a</mi> </mrow>\n    </mfrac>\n  </mrow>\n  <mtext>.</mtext>\n</math>"
  },
  "fileName": "presentation-2",
  "deckVersion": "1.0",
  "customBackgrounds": {
    "bgs": []
  }
}

[flat-linex]

Thanks a lot for the feedback. Unfortunately when I import the file
nothing happens (I have used both the strut.io.editor and a freshly
compiled grunt server).

Actually I would like to insert into the markdown only the script
part, while putting the text onto the usual canvas.

What I did is to put the scripts declarations into the markdown
section, and use the text tool in the canvas to insert:

math: $\energy\eqby{?}mc^2$

--> No 'real math'

Refresh the page (I am using the Firefox 36.04 on Windows 7):

--> 'real math' is there!!

I switch to preview:

--> again no real math

I save the preview as 'Web page complete':

--> no real math

I replace (in the saved html)

<script type="text/javascript" src="DeckTitle2_files/MathJax.js"></script>

with

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> </script>

--> real math!!

So it is really close ... any further hint?

Thanks,

[mwcz]

You may want to check that the MathJax.js file is being loaded properly (by using the Network tab in your browser's devtools). I suspect that src="DeckTitle2_files/MathJax.js" is 404ing.

Try putting <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> </script> into the markdown slide and see if it works then?

[flat-linex]

The script was already inserted into the markdown. To recap: if I remain in the editing window, I get the math working when I reload the page (which might be ok, I guess) but when I use the green impress button to preview it in the browser, math is not working (as it is not working when I save the show as a web complete page using the browser). So I guess the preview is in fact a correct preview of what I get when I download the presentation. This being the case, it seems to me that the problem is the way the mathjax file is linked: while I am in the editor it is directly fetched from the remote website (and probably sees supporting files correctly) when I preview it assumes the files locally, but the mathjax.js is only part of what should be there and it is not working. So without requesting any change on the 'official' strut, is there any strut file (in the source) where I can force the insertion of the two scripts without using the markdown so that I can use my locally built strut to preview and eventually postprocess the result to cope with a possibly local mathjax installation?

Below is my exported json:

    {
      "slides": [
        {
          "components": [
            {
              "TextBox": {},
              "x": 341.3333333333333,
              "y": 256,
              "scale": {
                "x": 1,
                "y": 1
              },
              "type": "TextBox",
              "size": 24,
              "text": "<br><br>",
              "selected": false
            },
            {
              "TextBox": {},
              "x": 361.3333333333333,
              "y": 276,
              "scale": {
                "x": 1,
                "y": 1
              },
              "type": "TextBox",
              "size": 50,
              "text": "math: $\\energy\\eqby{?}mc^2$",
              "selected": false
            }
          ],
          "z": 0,
          "impScale": 3,
          "rotateX": 0,
          "rotateY": 0,
          "rotateZ": 0,
          "index": 0,
          "selected": false,
          "active": true,
          "background": "bg-solid-sky",
          "markdown": "<script type=\"text/x-mathjax-config\">\n  MathJax.Hub.Config({\n  tex2jax: {\n    inlineMath: [ ['$','$'], ['\\\\(','\\\\)'] ]\n  },\n  TeX: {\n    Macros: {\n      energy: \"e\",\n      eqby: [\"\\\\stackrel{#1}{=}\",1],\n    }\n  }\n  });\n</script>\n<script type=\"text/javascript\"\n  src=\"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML\">\n</script>",
          "x": 180,
          "y": 180
        }
      ],
      "activeSlide": {
        "components": [
          {
            "TextBox": {},
            "x": 341.3333333333333,
            "y": 256,
            "scale": {
              "x": 1,
              "y": 1
            },
            "type": "TextBox",
            "size": 24,
            "text": "<br><br>",
            "selected": false
          },
          {
            "TextBox": {},
            "x": 361.3333333333333,
            "y": 276,
            "scale": {
              "x": 1,
              "y": 1
            },
            "type": "TextBox",
            "size": 50,
            "text": "math: $\\energy\\eqby{?}mc^2$",
            "selected": false
          }
        ],
        "z": 0,
        "impScale": 3,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "index": 0,
        "selected": false,
        "active": true,
        "background": "bg-solid-sky",
        "markdown": "<script type=\"text/x-mathjax-config\">\n  MathJax.Hub.Config({\n  tex2jax: {\n    inlineMath: [ ['$','$'], ['\\\\(','\\\\)'] ]\n  },\n  TeX: {\n    Macros: {\n      energy: \"e\",\n      eqby: [\"\\\\stackrel{#1}{=}\",1],\n    }\n  }\n  });\n</script>\n<script type=\"text/javascript\"\n  src=\"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML\">\n</script>",
        "x": 180,
        "y": 180
      },
      "fileName": "math",
      "deckVersion": "1.0",
      "customBackgrounds": {
        "bgs": []
      },
      "overviewX": 180,
      "overviewY": 180
    }

a

[mwcz]

Hmm, I imported your presentation and I'm seeing the same thing. I'm not sure why. I suspect it has something to do with how the MathJax config script works. It's black magic to me. I'm pretty sure "text/x-mathjax-config" isnt' a valid mimetype. :p

The presenation json I shared with you probabaly didn't work because I'm on a slightly customized version of strut. Here's the Markdown content from my slides that you can try:

<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi><mo>&#x2260;</mo><mn>0</mn>
</math>,
there are two solutions to
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
  <mo>+</mo> <mi>b</mi><mi>x</mi>
  <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>x</mi> <mo>=</mo>
  <mrow>
    <mfrac>
      <mrow>
        <mo>&#x2212;</mo>
        <mi>b</mi>
        <mo>&#x00B1;</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>&#x2212;</mo>
          <mn>4</mn><mi>a</mi><mi>c</mi>
        </msqrt>
      </mrow>
      <mrow> <mn>2</mn><mi>a</mi> </mrow>
    </mfrac>
  </mrow>
  <mtext>.</mtext>
</math>

That approach works well in all views (editor, preview, presentation, saved locally). Is MathML an option for you?

[flat-linex]

Thanks a lot: it works ... but you loose the convenience of using the graphical interface to personalize text presentation (font, position, etc...)