CoCalc -- latex-editor.tsx

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/next/pages/features/latex-editor.tsx
Views: ⁶⁸⁷
1
/*
2
 *  This file is part of CoCalc: Copyright © 2022 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Descriptions, Layout } from "antd";
7

8
import { Icon } from "@cocalc/frontend/components/icon";
9
import Backups from "components/landing/backups";
10
import Code from "components/landing/code";
11
import Collaboration from "components/landing/collaboration";
12
import Comparison from "components/landing/compare";
13
import Content from "components/landing/content";
14
import Footer from "components/landing/footer";
15
import Head from "components/landing/head";
16
import Header from "components/landing/header";
17
import Info from "components/landing/info";
18
import LaTeX from "components/landing/latex";
19
import Pitch from "components/landing/pitch";
20
import Publishing from "components/landing/publishing";
21
import SignIn from "components/landing/sign-in";
22
import { Paragraph, Text, Title } from "components/misc";
23
import A from "components/misc/A";
24
import { Customize } from "lib/customize";
25
import withCustomize from "lib/with-customize";
26
import LatexCollab from "public/features/cocalc-latex-concurrent-editing.png";
27
import LatexEditorImage from "public/features/cocalc-latex-editor-2019.png";
28
import Sidechat from "public/features/cocalc-latex-side-chat-v2.png";
29
import Pythontex from "public/features/cocalc-pythontex.png";
30
import Sagetex from "public/features/cocalc-sagetex.png";
31
import AIFormula from "public/features/latex-ai-formula.png";
32
import CustomCommand from "public/features/latex-custom-command-02.png";
33
import Knitr from "public/features/latex-editor-rnw-01.png";
34
import LatexTimetravel from "public/features/latex-editor-timetravel-01.png";
35
import Logo from "public/features/latex-logo.svg";
36

37
export default function LatexEditor({ customize }) {
38
  return (
39
    <Customize value={customize}>
40
      <Head title="Online LaTeX Editor" />
41
      <Layout>
42
        <Header page="features" subPage="latex-editor" />
43
        <Layout.Content>
44
          <Content
45
            landing
46
            startup={<LaTeX />}
47
            body={Logo}
48
            title={"Online LaTeX Editor"}
49
            subtitle={
50
              <>
51
                Focus on writing LaTeX. CoCalc takes care of everything else.
52
                <hr />
53
                <A href="https://about.cocalc.com/2023/01/13/cocalcs-online-latex-editor/">
54
                  Learn much more about LaTeX in CoCalc from this new blog
55
                  post...
56
                </A>
57
              </>
58
            }
59
            image={LatexEditorImage}
60
          />
61

62
          <Pitch
63
            col1={
64
              <>
65
                <Title level={2}>
66
                  No software install required: <small>100% online</small>
67
                </Title>
68
                <Paragraph>
69
                  CoCalc{"'"}s{" "}
70
                  <A href="https://doc.cocalc.com/latex.html">
71
                    <LaTeX /> editor
72
                  </A>{" "}
73
                  supports
74
                </Paragraph>
75
                <Paragraph>
76
                  <ul>
77
                    <li>
78
                      <strong>side-by-side preview</strong> with{" "}
79
                      <strong>forward and inverse search</strong>,
80
                    </li>
81
                    <li>
82
                      compiles upon saving and marks errors in the source file,
83
                    </li>
84
                    <li>
85
                      periodically <a href="#a-backups">backups</a> all your
86
                      files,
87
                    </li>
88
                    <li>
89
                      an{" "}
90
                      <strong>
91
                        <a href="#a-ai-formula">AI-powered formula assistant</a>
92
                      </strong>{" "}
93
                      typsets formulas for you
94
                    </li>
95
                    <li>
96
                      <strong>
97
                        <a href="#a-calculations">runs embedded calculations</a>
98
                      </strong>{" "}
99
                      right inside your document,
100
                    </li>
101
                    <li>
102
                      <strong>
103
                        <A href="https://doc.cocalc.com/latex-features.html#latex-multi-file-support">
104
                          multi-file support
105
                        </A>
106
                      </strong>{" "}
107
                      that discovers included files automatically, and
108
                    </li>
109
                    <li>
110
                      every{" "}
111
                      <strong>
112
                        <a href="#a-timetravel">change is recorded</a>
113
                      </strong>{" "}
114
                      while you type.
115
                    </li>
116
                  </ul>
117
                </Paragraph>
118
              </>
119
            }
120
            col2={
121
              <>
122
                <Title level={2}>
123
                  Working with <LaTeX /> made easy
124
                </Title>
125
                <Paragraph>
126
                  <Descriptions
127
                    layout="vertical"
128
                    bordered
129
                    column={1}
130
                    size={"small"}
131
                  >
132
                    <Descriptions.Item
133
                      label="Tired of sending changes back and forth with your
134
                      colleagues?"
135
                    >
136
                      <strong>
137
                        <a href="#a-realtimesync">Collaborate online</a>
138
                      </strong>{" "}
139
                      without any limits!
140
                    </Descriptions.Item>
141

142
                    <Descriptions.Item label="Scared of breaking a document?">
143
                      Revert recent changes using{" "}
144
                      <a href="#a-timetravel">TimeTravel</a>.
145
                    </Descriptions.Item>
146

147
                    <Descriptions.Item
148
                      label={
149
                        <>
150
                          Worried about maintaining your <LaTeX /> environment?
151
                        </>
152
                      }
153
                    >
154
                      CoCalc takes care of everything.
155
                    </Descriptions.Item>
156

157
                    <Descriptions.Item label="Want to work from anywhere?">
158
                      You only need a web browser and Internet access, or you
159
                      can <A href="/pricing/onprem">run your own server.</A>
160
                    </Descriptions.Item>
161
                  </Descriptions>
162
                </Paragraph>
163
              </>
164
            }
165
            ext="tex"
166
          />
167

168
          <SignIn startup={<LaTeX />} />
169

170
          <Collaboration image={LatexCollab} />
171

172
          <Info
173
            anchor="a-ai-formula"
174
            icon="robot"
175
            title="AI-powered formula assistant"
176
            image={AIFormula}
177
            alt="Generate LaTeX formulas based on a human readable descriptions via AI"
178
          >
179
            <Paragraph>
180
              CoCalc's extensive integation with various AI language models
181
              helps you typesetting formulas.
182
            </Paragraph>
183
            <Paragraph>
184
              You enter a description of your desired formula and{" "}
185
              <strong>
186
                a language model of your choice transforms it into a proper
187
                LaTeX formula
188
              </strong>
189
              . The descriptions can come in various ways:
190
              <Descriptions
191
                layout="vertical"
192
                bordered
193
                column={1}
194
                size={"small"}
195
              >
196
                <Descriptions.Item label="Natural language description">
197
                  <Text code>drake equation</Text>
198
                </Descriptions.Item>
199

200
                <Descriptions.Item label="simple algebraic notation">
201
                  <Text code>(a+b)^2 = a^2 + 2 a b + b^2</Text>
202
                </Descriptions.Item>
203

204
                <Descriptions.Item label="Or a combination of both">
205
                  <Text code>
206
                    integral from 0 to infinity of (1+sin(x))/x^2 dx
207
                  </Text>
208
                </Descriptions.Item>
209
              </Descriptions>
210
            </Paragraph>
211
            <Paragraph>
212
              Once you got a result you like, click on "Insert" the formula is
213
              in your document.
214
            </Paragraph>
215
          </Info>
216

217
          <Info
218
            anchor="a-computational"
219
            icon="laptop"
220
            title="Full computational environment"
221
            image={LatexEditorImage}
222
            alt="Two browser windows editing the same LaTeX file"
223
            wide
224
          >
225
            <Paragraph>
226
              One thing that sets CoCalc apart from other online <LaTeX />{" "}
227
              editors is <strong>full access to computational software</strong>.
228
              This means you can seamlessly transition from <em>computing</em>{" "}
229
              your results to <em>publishing</em> them.
230
            </Paragraph>
231
            <Paragraph>
232
              CoCalc supports running <A href="/features/python">Python</A>,{" "}
233
              <A href="http://www.sagemath.org/">SageMath</A>,{" "}
234
              <A href="/features/r-statistical-software">
235
                R Statistical Software
236
              </A>
237
              , <A href="/features/julia">Julia</A>, and more in the same
238
              project as your <LaTeX /> document.
239
            </Paragraph>
240
            <Paragraph>
241
              Consult the <A href="/software">Available Software page</A> or
242
              look at our{" "}
243
              <A href="/features/jupyter-notebook">Jupyter Notebook page</A> for
244
              more information.{" "}
245
            </Paragraph>
246
          </Info>
247

248
          <Info
249
            anchor="a-calculations"
250
            textStyleExtra={{ background: "inherit" }}
251
            title={
252
              <>
253
                Run SageMath, Python, or R in <LaTeX />
254
              </>
255
            }
256
            alt="A LaTeX document with embedded SageMath code"
257
          >
258
            <Paragraph>
259
              You can run calculations inside your <LaTeX /> documents! It's
260
              possible to embed Sage, R, or Python code in your document to
261
              automatically generate text, plots, formulas or tables. The code
262
              is evaluated as part of the compilation process and the output
263
              will be included in the generated document.
264
            </Paragraph>
265
          </Info>
266

267
          <Info
268
            anchor="a-sagetex"
269
            title="SageTex"
270
            icon="sagemath"
271
            image={Sagetex}
272
            alt="Editing LaTeX with SageTex code"
273
          >
274
            <Paragraph>
275
              <strong>
276
                <A href="http://doc.sagemath.org/html/en/tutorial/sagetex.html">
277
                  SageTeX
278
                </A>{" "}
279
                lets you embed <A href="https://www.sagemath.org/">SageMath</A>{" "}
280
                in your document!
281
              </strong>
282
            </Paragraph>
283
            <Paragraph>
284
              Write Sage commands like{" "}
285
              <Code>
286
                \sage{"{"}2 + 3{"}"}
287
              </Code>{" "}
288
              in <LaTeX /> and the document will contain "5",{" "}
289
              <Code>
290
                \sage{"{"}f.taylor(x, 0, 10){"}"}
291
              </Code>{" "}
292
              for the Taylor expansion of a function <em>f</em>, and drawing
293
              graphs becomes as simple as{" "}
294
              <Code>
295
                \sageplot{"{"}sin(x^2){"}"}
296
              </Code>
297
              .
298
            </Paragraph>
299
            <Paragraph>
300
              <strong>
301
                CoCalc deals with all the underlying details for you:
302
              </strong>
303
            </Paragraph>
304
            <Paragraph>
305
              <ul>
306
                <li>It runs the initial compilation pass,</li>
307
                <li>
308
                  uses <A href="https://www.sagemath.org/">SageMath</A> to
309
                  compute the text output, graphs and images,
310
                </li>
311
                <li>
312
                  and then runs a second compilation pass to produce the final
313
                  PDF output.
314
                </li>
315
              </ul>
316
            </Paragraph>
317
          </Info>
318

319
          <Info
320
            anchor="a-pythontex"
321
            title="PythonTex"
322
            icon="python"
323
            image={Pythontex}
324
            alt="Editing LaTeX with PythonTex code"
325
          >
326
            <Paragraph>
327
              <strong>
328
                <A href="https://ctan.org/pkg/pythontex">PythonTeX</A> allows
329
                you to run Python from within a document and typeset the
330
                results.
331
              </strong>
332
            </Paragraph>
333
            <Paragraph>
334
              For example,{" "}
335
              <Code>
336
                \py{"{"}2 + 4**2{"}"}
337
              </Code>{" "}
338
              produces "18". You can use all{" "}
339
              <A href="/software/python">available python libraries</A> for
340
              Python 3, drawing plots via <code>pylab</code>, and use
341
              PythonTeX's SymPy support.
342
            </Paragraph>
343
            <Paragraph>
344
              Again, CoCalc automatically detects that you want to run PythonTeX
345
              and handles all the details for you.{" "}
346
            </Paragraph>
347
          </Info>
348

349
          <Info
350
            anchor="a-knitr"
351
            title="R/Knitr"
352
            icon="r"
353
            image={Knitr}
354
            alt="Editing LaTeX with R/Knitr code"
355
          >
356
            <Paragraph>
357
              CoCalc's <LaTeX /> editor also supports{" "}
358
              <strong>
359
                <A href="https://yihui.name/knitr/">Knitr</A>
360
              </strong>{" "}
361
              documents (with filename extension <code>.Rnw</code>). This gives
362
              you the ability to embed arbitrary{" "}
363
              <A href="https://www.r-project.org/">R Software</A> commands and
364
              plots in your <LaTeX /> file.
365
            </Paragraph>
366
            <Paragraph>
367
              Behind the scenes, CoCalc deals with all underlying details for
368
              you:
369
            </Paragraph>
370
            <Paragraph>
371
              <ul>
372
                <li>
373
                  installation and management of{" "}
374
                  <A href="/software/r">all R packages</A>,
375
                </li>
376
                <li>
377
                  orchestrates the full compilation pipeline for <LaTeX /> and
378
                  running R, and
379
                </li>
380
                <li>
381
                  reconciles the line numbers of the .Rnw file with the
382
                  corresponding .tex document for correct{" "}
383
                  <A href="#a-forwardinverse">
384
                    <strong>forward and inverse search</strong>
385
                  </A>
386
                  .{" "}
387
                </li>
388
              </ul>
389
            </Paragraph>
390
          </Info>
391

392
          <Info.Heading
393
            description={
394
              <>
395
                The following are some specific features of editing <LaTeX /> in
396
                CoCalc.
397
                <br />
398
                There is also more{" "}
399
                <A href="https://doc.cocalc.com/latex.html">
400
                  comprehensive documentation
401
                </A>
402
                .
403
              </>
404
            }
405
          >
406
            <LaTeX /> Editing Features
407
          </Info.Heading>
408

409
          <Info
410
            anchor="a-forwardinverse"
411
            title="Forward and Inverse search"
412
            icon="sync"
413
            video={[
414
              "features/latex-forward-inverse-02.webm",
415
              "features/latex-forward-inverse-02.mp4",
416
            ]}
417
            wide
418
            alt="Video showing forward and inverse search in a LaTeX document"
419
          >
420
            <Paragraph>
421
              Let CoCalc help you find your way around in large documents!
422
            </Paragraph>
423
            <Paragraph>
424
              <strong>Forward Search</strong> lets you jump from the <LaTeX />{" "}
425
              source to the corresponding part in the rendered preview. This
426
              saves you time looking for the output.
427
            </Paragraph>
428
            <Paragraph>
429
              <strong>Inverse search</strong> does the opposite: double click on
430
              the output and your cursor jumps to the line in the source file
431
              for that output.
432
            </Paragraph>
433
            <Paragraph>
434
              Under the hood, CoCalc uses{" "}
435
              <A href="https://github.com/jlaurens/synctex">SyncTeX</A>{" "}
436
              seamlessly.
437
            </Paragraph>
438
          </Info>
439

440
          <Info
441
            anchor="a-environments"
442
            icon="tex-file"
443
            title={
444
              <>
445
                Managed <LaTeX /> environments
446
              </>
447
            }
448
            image={CustomCommand}
449
            alt="Menu showing the different LaTeX engines in CoCalc"
450
          >
451
            <Paragraph>
452
              CoCalc makes sure that your desired <LaTeX /> engine is available
453
              and ready to use. You can choose between{" "}
454
              <strong>
455
                <A href="http://www.tug.org/applications/pdftex/">PDF Latex</A>
456
              </strong>
457
              ,{" "}
458
              <strong>
459
                <A href="http://xetex.sourceforge.net/">XeLaTeX</A>
460
              </strong>{" "}
461
              or{" "}
462
              <strong>
463
                <A href="http://www.luatex.org/">LuaTeX</A>
464
              </strong>
465
              .
466
            </Paragraph>
467
            <Paragraph>
468
              Many packages and utilities like{" "}
469
              <A href="https://sourceforge.net/projects/pgf/">PGF and TikZ</A>{" "}
470
              are pre-installed.
471
            </Paragraph>
472
            <Paragraph>
473
              Behind the scenes,{" "}
474
              <A href="http://mg.readthedocs.io/latexmk.html">LatexMK</A> is
475
              configured to manage the compilation process.
476
            </Paragraph>
477
            <Paragraph>
478
              It is also possible to{" "}
479
              <strong>fully customize the compilation command</strong>, so you
480
              can bring your own shell script or even use a Makefile!
481
            </Paragraph>
482
          </Info>
483

484
          <Info
485
            anchor="a-timetravel"
486
            title="TimeTravel"
487
            icon="history"
488
            image={LatexTimetravel}
489
            alt={
490
              "Using the TimeTravel slider to see what changed in a LaTeX document"
491
            }
492
          >
493
            <Paragraph>
494
              The <strong>TimeTravel feature</strong> is specific to the CoCalc
495
              platform. It records all changes in the document in fine detail.
496
              You can go back and forth in time using a slider across thousands
497
              of changes to recover your previous edits.
498
            </Paragraph>
499
            <Paragraph>
500
              This is especially helpful for pinpointing which of the recent
501
              changes caused a <strong>compilation error</strong>. You can see
502
              the recent changes and exactly where the modifications happened,
503
              and who made them.
504
            </Paragraph>
505
          </Info>
506

507
          <Info
508
            anchor="a-chat"
509
            title="Side Chat"
510
            icon="comment"
511
            image={Sidechat}
512
            alt="Chatting about a LaTeX document right next to that document"
513
          >
514
            <Paragraph>
515
              A{" "}
516
              <strong>
517
                <A href="https://doc.cocalc.com/chat.html">side-by-side chat</A>
518
              </strong>{" "}
519
              for each <LaTeX /> file lets you discuss your content with
520
              collaborators or give feedback to your students while they are
521
              working on their assignments.
522
            </Paragraph>
523
            <Paragraph>
524
              Collaborators who are offline will be notified about new messages
525
              the next time they sign in. If you @mention them, they receive an
526
              email notification.
527
            </Paragraph>
528
            <Paragraph>
529
              Chat messages also support{" "}
530
              <A href="https://en.wikipedia.org/wiki/Markdown">Markdown</A>{" "}
531
              formatting with <LaTeX /> formulas.{" "}
532
            </Paragraph>
533
          </Info>
534

535
          <Backups />
536
          <Publishing />
537

538
          <Comparison
539
            name="latex"
540
            disclaimer
541
            title={
542
              <h2 style={{ textAlign: "center" }}>
543
                <Icon name="bolt" /> <LaTeX /> in CoCalc versus the competition
544
              </h2>
545
            }
546
          />
547

548
          <SignIn startup={<LaTeX />} />
549
        </Layout.Content>
550
        <Footer />
551
      </Layout>
552
    </Customize>
553
  );
554
}
555

556
export async function getServerSideProps(context) {
557
  return await withCustomize({ context });
558
}
559

560
Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

Product

Resources

Company

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more, all in one place.

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.
