Tôi có thể sử dụng HTML trong Jupyter Notebook không?

Mặc dù sổ ghi chép Jupyter thường được sử dụng tương tác, với các ô được thực thi riêng lẻ, để xuất bản trên Code Ocean, chúng tôi yêu cầu toàn bộ sổ ghi chép đó được thực thi. Điều này cho phép sổ ghi chép đóng vai trò là bản ghi phân tích có thể lặp lại từ đầu đến cuối

Để làm như vậy, hãy thêm các lệnh* vào tập lệnh chính của bạn để thực thi jupyter nbconvert  với cờ --execute  được liệt kê. Điều này hiển thị kết quả cuối cùng thành /results dưới dạng tệp HTML

jupyter nbconvert \
  --ExecutePreprocessor.allow_errors=True \
  --ExecutePreprocessor.timeout=-1 \
  --FilesWriter.build_directory=../results \
  --execute notebook.ipynb

ghi chú

• Cờ --ExecutePreprocessor.allow_errors=True không thực sự cần thiết, nhưng sẽ tiết lộ các lỗi trong sổ ghi chép, giúp việc gỡ lỗi dễ dàng hơn nhiều

• Cờ --ExecutePreprocessor.timeout=-1 sẽ vô hiệu hóa thời gian chờ thực thi, cho phép mỗi ô mất nhiều thời gian cần thiết để thực thi

• Nếu bạn đang sử dụng Python 3, bạn có thể cần chỉ định cờ sau.
--ExecutePreprocessor.kernel_name="python3"

• Code Ocean hiện loại bỏ các kết quả nội tuyến từ sổ ghi chép trong ngăn /code. Điều này cho thấy rằng tất cả sổ ghi chép trong /results  đã được hiển thị thành công trong môi trường Code Ocean

  Tìm hiểu cách tích hợp sổ ghi chép jupyter vào một trang web và cách đánh dấu mã và hiển thị các phương trình hay

  Giới thiệu

  Trong bài đăng này, bạn sẽ học cách thiết lập một trang web để truyền đạt các kết quả khoa học theo phong cách

  Khi bạn hoàn thành bài tập này, bạn sẽ biết cách

  • tích hợp hoàn hảo sổ ghi chép jupyter vào một trang web,
  • áp dụng phong cách tổng thể thanh lịch với Bootstrap,
  • đánh dấu mã với Pygments,
  • hiển thị phương trình toán học với MathJax

  Có nhiều cách để làm điều này với một hệ thống quản lý nội dung (CMS) như WordPress và tôi đã thực sự làm điều đó trước đây. Nhưng điều đó thực tế khó khăn hơn và kết quả không tốt bằng. Bạn có thể dùng thử nếu thích và thậm chí quay lại đây để đặt câu hỏi trong phần nhận xét nếu cần. tôi sẽ rất vui khi được giúp đỡ

  Tuy nhiên, trong phần sau, tôi sẽ cho rằng bạn muốn làm tốt hơn và bạn đang viết các trang HTML của riêng mình

  Cá nhân tôi sử dụng django làm khung web, với wagtail là CMS. Bạn có thể quyết định sử dụng một khung web dựa trên python khác như Flask, một khung dựa trên PHP hoặc thậm chí tránh xa các khung web và viết các trang tĩnh đơn giản. Nhân tiện, nếu bạn muốn có một blog tĩnh, bạn chắc chắn nên xem xét Jekyll

  Ở đây, tôi thiết lập một trang HTML tĩnh để có thể giúp bạn, bất cứ con đường nào bạn đi

  Và tất cả mã có sẵn trong kho lưu trữ github này

  

  Jupyter nbconvert

  Nếu bạn ở đây, chắc chắn bạn biết về jupyter nbconvert

  Về cơ bản, có hai cách để sử dụng công cụ này để chuyển đổi sổ ghi chép sang HTML

  Chế độ mẫu mặc định được gọi như thế này

  jupyter nbconvert --execute my_notebook.ipynb
  

  Tệp kết quả,

  jupyter nbconvert --execute --template basic my_notebook.ipynb
  

  7, có thể được tải trong trình duyệt web và trông giống hệt như sổ ghi chép jupyter trực tiếp

  Bạn có một kiểu dáng đẹp cho các ô đầu vào và đầu ra, cho các bảng và cho các ô. Hơn nữa, mã được đánh dấu và các phương trình toán học được viết bằng markdown xuất hiện chính xác

  Điều này hoạt động vì tất cả CSS (biểu định kiểu) và javascript cần thiết đều được bao gồm trong tiêu đề HTML hoặc trong phần thân HTML. Ngoài ra, tệp chứa các thẻ mở và đóng

  Nhưng nội dung của một tệp như vậy không thể được chèn liền mạch vào một trang web cũng như trong một trang web đầy đủ

  Một giải pháp có thể là đưa tệp này vào iframe, nhưng có hai nhược điểm quan trọng. Kiểu trong khung nội tuyến sẽ không nhất quán với kiểu của phần còn lại của trang và bạn sẽ nhận được chế độ xem khung nội tuyến cố định với thanh cuộn dọc mà bạn buộc phải sử dụng để đọc toàn bộ sổ ghi chép jupyter

  Chế độ mẫu cơ bản của nbconvert là chế độ chúng tôi sẽ sử dụng. Người ta chỉ cần thêm một tùy chọn

  jupyter nbconvert --execute --template basic my_notebook.ipynb
  

  Lần này, chỉ nội dung của phần thân được ghi vào tệp đầu ra. Bạn vẫn có thể tải tệp này trong trình duyệt web, nhưng bạn sẽ thấy rằng tất cả kiểu dáng đẹp mắt đã biến mất. phông chữ và thiết lập trang từ những năm 1990, không còn đánh dấu cú pháp, không còn phương trình

  Trong bài viết này, bạn sẽ tìm hiểu cách lấy lại tất cả những thứ này và tích hợp jupyter notebook vào trang web của bạn với một phong cách hoàn toàn nhất quán

  Để thử nghiệm, chúng tôi sẽ sử dụng tệp html jupyter mà tôi đã tạo bằng chế độ mẫu cơ bản cho một trong các bài đăng của mình

  Cài đặt

  Tôi đã tạo một kho lưu trữ github với tất cả các tệp chúng tôi cần

  Chỉ cần sao chép nó và làm theo hướng dẫn trong README để xem kết quả cuối cùng

  Đây có thể là tất cả những gì bạn cần. nhưng nếu bạn muốn hiểu tất cả những thứ này hoạt động như thế nào để bạn có thể thực hiện tích hợp này trong trang web của riêng mình, vui lòng tiếp tục đọc

  Một trang web thử nghiệm đơn giản

  Mục tiêu của bài viết này là giúp bạn dễ dàng hiểu những việc cần làm để tích hợp sổ ghi chép jupyter vào trang web, để bạn có thể tự làm việc đó trên trang web của mình

  Vì lý do này, tôi không muốn dựa vào các khung web phức tạp như Django hoặc Flask và quyết định gắn bó với HTML và mã python

  Vì vậy, chúng ta sẽ bắt đầu với một trang web thử nghiệm rất đơn giản

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  Mục tiêu của chúng tôi bây giờ là thay thế thẻ mẫu

  jupyter nbconvert --execute --template basic my_notebook.ipynb
  

  8 bằng nội dung của sổ ghi chép jupyter của chúng tôi và làm cho tất cả những thứ này trông đẹp mắt

  Jinja2 như một công cụ mẫu

  Các trang web động như blog này dựa trên một công cụ mẫu. Vai trò của nó là tạo các trang web một cách nhanh chóng, tùy thuộc vào yêu cầu của khách hàng. Ví dụ: lấy hộp thẻ ở bên phải của trang này. Dưới mui xe, công cụ mẫu tạo hộp này bằng cách lặp trên tất cả các thẻ hiện có. Nếu thẻ được liên kết với trang hiện tại, nó sẽ được đánh dấu

  Đối với trang web này, tôi sử dụng công cụ mẫu django

  Ở đây, chúng ta sẽ sử dụng Jinja2, một công cụ mẫu python độc lập, để thay thế thẻ mẫu

  jupyter nbconvert --execute --template basic my_notebook.ipynb
  

  8 bằng nội dung của tệp HTML sổ ghi chép jupyter

  Vì vậy, trước tiên hãy cài đặt Jinja2, e. g. với pip

  Sau đó, tạo tập lệnh có tên

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  0 với mã sau

  ________số 8_______

  Vui lòng xem các nhận xét nội tuyến để hiểu tập lệnh này đang làm gì. Bạn thấy đấy, nó khá đơn giản

  Sau đó, chạy nó

  Và mở chỉ mục kết quả. tập tin html trong trình duyệt của bạn. Về cơ bản nó sẽ hoạt động, nhưng kết quả là xấu

  Vì vậy, chúng tôi sẽ làm việc trên phong cách

  Kiểu dáng bóng bẩy với bootstrap

  Khi nói đến kiểu dáng web, bootstrap là cách tốt nhất. Chúng tôi sẽ chỉ thêm một vài dòng vào mẫu chính của mình, kết xuất lại và nhận một trang web hiện đại. Vì vậy, hãy chỉnh sửa

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  1 để nó trông như thế này

  
  
    
      
    
  
    
      
  
        Integrating a Jupyter Notebook in a Web Page
        
  Some text.
   
  
        {% include 'overfitting.html' %}
        
      
  
    
  
  

  Kết xuất lại và làm mới trình duyệt của bạn. Đẹp hơn nhiều

  Tuy nhiên, chúng tôi muốn trang web của mình trở nên hoàn hảo và chúng tôi vẫn chưa đạt được điều đó. Lời nhắc đầu vào và đầu ra của sổ ghi chép của chúng tôi không giống như lời nhắc trong sổ ghi chép jupyter và chúng tôi không có đánh dấu cú pháp mã

  Trước tiên chúng ta hãy làm việc với phong cách sổ ghi chép

  CSS máy tính xách tay Jupyter

  Tôi đã trích xuất phần quan trọng của CSS máy tính xách tay jupyter và đặt nó vào

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  2. Tôi đã làm điều đó bằng tay và có thể có cách để làm điều đó sạch sẽ hơn. Dù sao đi nữa, hãy thêm CSS này vào mẫu của chúng tôi. Chỉ cần chỉnh sửa phần đầu để thêm CSS này như hình dưới đây. Và tôi nhân cơ hội này để cải thiện phong cách hơn nữa với

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  3

  Kết xuất lại và làm mới trình duyệt của bạn. Bây giờ chúng tôi nhận được điều này

  Điều này bắt đầu trông giống như một cuốn sổ tay jupyter. Và bây giờ, hãy đối phó với

  Làm nổi bật cú pháp mã Jupyter với Pygments

  Pygments là một công cụ tô sáng cú pháp python (thực ra là THE). Bạn cung cấp cho nó một chuỗi với một số mã, nó sử dụng "lexer" để phân tích mã và tạo html với đánh dấu cú pháp cho mã. Bạn có thể xem cách sử dụng nó trong phần Giới thiệu và Khởi động nhanh của tài liệu pygments

  Hóa ra jupyter đang sử dụng pygment để đánh dấu mã. Và chúng ta có thể tìm ra trong

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  4 rằng các ô mã có lớp

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  5, vì các phần tử này bắt đầu bằng

  .

  Vì vậy, chúng ta cần tìm một tệp CSS để tạo kiểu cho các phần tử của lớp này. Tôi đã tạo tệp CSS để thực hiện việc này, trong

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  6. Nếu bạn muốn tạo lại tệp, chỉ cần làm

  pygmentize -f html -S colorful -a .highlight > colorful.css
  

  Sau đó, đưa CSS này vào tiêu đề HTML của bạn trong

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  1 như thế này

  Xin lưu ý rằng tôi đang giữ

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  3 ở cuối tiêu đề, vì tôi muốn có ý kiến ​​cuối cùng về phong cách trong tệp này

  Như thường lệ, kết xuất và làm mới, thế là xong. Đánh dấu cú pháp

  Tốt lắm. nhưng lưu ý rằng chúng tôi hiện chỉ đánh dấu các phần tử có lớp

  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  

  5. Nếu bạn cũng muốn viết mã trong trang HTML của mình (không phải trong sổ ghi chép jupyter), bạn có thể muốn mã này được đánh dấu giống hệt như vậy. Thật dễ dàng, và đó là những gì chúng ta sẽ làm tiếp theo

  Đánh dấu cú pháp của mã HTML với pygment

  Hãy đặt vấn đề. Chúng tôi muốn tất cả các mã được viết giữa

  .. <\pre> tags to be properly highlighted. And we don't want to use our template engine for this, in order to limit manual editing of the template HTML code.
  To do this, we will
  use beautiful soup in our rendering script to parse the HTML code, to find the 
   tags;
  sử dụng pygment để tạo các thẻ 
  import os
  
  from jinja2 import Environment, FileSystemLoader
  
  # this tells jinja2 to look for templates
  # in the templates subdirectory
  env = Environment(
      loader = FileSystemLoader('templates'),
  )
  
  input_file = 'main.html'
  output_file = 'index.html'
  
  # reading the template
  template = env.get_template(input_file)
  # render the template.
  # in other words, we replace the template tag
  # by the contents of the overfitting file
  rendered = template.render()
  
  # write the result to disk in index.html
  with open(output_file, 'w') as ofile:
      ofile.write(rendered)
  0 với mã được đánh dấu;
  thay thế 
   tags with these 
   tags, again with beautiful soup.
  Đầu tiên, cài đặt súp đẹp
          
          
  jupyter nbconvert --execute --template basic my_notebook.ipynb
  0
  Sau đó, thêm một phần mã vào 
  import os
  
  from jinja2 import Environment, FileSystemLoader
  
  # this tells jinja2 to look for templates
  # in the templates subdirectory
  env = Environment(
      loader = FileSystemLoader('templates'),
  )
  
  input_file = 'main.html'
  output_file = 'index.html'
  
  # reading the template
  template = env.get_template(input_file)
  # render the template.
  # in other words, we replace the template tag
  # by the contents of the overfitting file
  rendered = template.render()
  
  # write the result to disk in index.html
  with open(output_file, 'w') as ofile:
      ofile.write(rendered)
  1
  jupyter nbconvert --execute --template basic my_notebook.ipynb
  1.
  Điều quan trọng cần lưu ý là các tab hoặc khoảng trắng ở đầu mỗi dòng mã sẽ xuất hiện trong định dạng. Vì vậy, tôi đang cẩn thận để không đặt bất kỳ ở đây
  Kết xuất lại để xem nó trông như thế nào
  Bây giờ, chúng tôi sẽ sửa đổi tập lệnh hiển thị của mình để thay thế
  jupyter nbconvert --execute --template basic my_notebook.ipynb
  2
  jupyter nbconvert --execute --template basic my_notebook.ipynb
  3
  Bây giờ bạn có thể kết xuất lại, làm mới trình duyệt của mình và xem kết quả
  Xin lưu ý rằng, để kiểu mã này hoàn toàn nhất quán với kiểu mã xuất phát từ sổ ghi chép, tôi đã thêm đoạn mã sau vào 
  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  3
  jupyter nbconvert --execute --template basic my_notebook.ipynb
  4
  Phương trình khoa học với MathJax (và một chút vật lý hạt)
  Đây rõ ràng là điều bắt buộc trong bất kỳ blog khoa học nào. Nhiều nhà khoa học sử dụng LaTeX để sắp chữ và hiển thị các bài báo khoa học ở dạng pdf, bao gồm cả các phương trình
  Trong các trang web, chúng tôi có thể tiếp tục sử dụng LaTeX để sắp xếp các phương trình và chúng tôi sẽ hiển thị chúng bằng MathJax
  Đầu tiên , thêm phần toán học vào 
  
  
    
    
  
    
      Integrating a Jupyter Notebook in a Web Page
      
  Some text.
   
  
      {% include overfitting.html %}
      
    
  
  1
  jupyter nbconvert --execute --template basic my_notebook.ipynb
  5
  Lúc đầu, cú pháp LaTeX có thể hơi khó sử dụng, nhưng mọi người sẽ quen với nó
  Sau đó, ở cuối phần nội dung, hãy thêm các tập lệnh để kích hoạt MathJax
  jupyter nbconvert --execute --template basic my_notebook.ipynb
  6
  Tập lệnh cuối cùng là một đoạn cấu hình cho MathJax. Điều này có nghĩa là tôi muốn sắp xếp các phương trình nội tuyến giữa các dấu hiệu 
  import os
  
  from jinja2 import Environment, FileSystemLoader
  
  # this tells jinja2 to look for templates
  # in the templates subdirectory
  env = Environment(
      loader = FileSystemLoader('templates'),
  )
  
  input_file = 'main.html'
  output_file = 'index.html'
  
  # reading the template
  template = env.get_template(input_file)
  # render the template.
  # in other words, we replace the template tag
  # by the contents of the overfitting file
  rendered = template.render()
  
  # write the result to disk in index.html
  with open(output_file, 'w') as ofile:
      ofile.write(rendered)
  4. Và do đó, tôi sẽ không thể sử dụng ký hiệu đô la trên trang này nữa. Nếu cần, tôi có thể thoát khỏi nó và viết giá như thế này 
  import os
  
  from jinja2 import Environment, FileSystemLoader
  
  # this tells jinja2 to look for templates
  # in the templates subdirectory
  env = Environment(
      loader = FileSystemLoader('templates'),
  )
  
  input_file = 'main.html'
  output_file = 'index.html'
  
  # reading the template
  template = env.get_template(input_file)
  # render the template.
  # in other words, we replace the template tag
  # by the contents of the overfitting file
  rendered = template.render()
  
  # write the result to disk in index.html
  with open(output_file, 'w') as ofile:
      ofile.write(rendered)
  5
  Kết xuất và làm mới lại, và bạn sẽ nhận được điều này
  Đối với kỷ lục, phương trình nổi tiếng đầu tiên cho thấy sự tương đương giữa khối lượng và năng lượng. Vì tốc độ ánh sáng $c$ là một hằng số, nên chúng ta chỉ cần đặt nó thành một và quên nó đi (vâng, đó là điều mà các nhà vật lý hạt làm. ). Và chúng ta kết luận rằng một hạt có khối lượng $m$ ở trạng thái nghỉ có năng lượng $E=m$
  Và điều này giải thích tại sao chúng tôi xây dựng các máy va chạm lớn như LHC tại CERN. Máy va chạm này gia tốc hai chùm proton theo hướng ngược nhau để chúng đạt năng lượng rất cao. Sau đó, các proton được định hướng va chạm tại các điểm tương tác cụ thể. Năng lượng được lưu trữ trong hai proton va chạm được chuyển thành khối lượng trong va chạm, để tạo ra các hạt mới. Hầu hết các hạt này đều đã được biết đến, nhưng nếu năng lượng khả dụng đủ lớn, chúng ta có cơ hội tạo ra và phát hiện ra các hạt nặng mà trước đây Nhân loại chưa từng quan sát thấy.
  Đây là cách chúng tôi phát hiện ra boson Higgs vào năm 2012
  Phương trình thứ hai là Lagrangian Dirac cho các hạt vật chất tự do, được gọi là fermion. Nếu bạn phát triển nó, thuật ngữ đầu tiên của nó tương ứng với động năng của chúng và thuật ngữ thứ hai tương ứng với khối lượng của chúng
  Phần kết luận
  Trong bài viết này, bạn đã học được cách
  tích hợp hoàn hảo sổ ghi chép jupyter vào một trang web,
  áp dụng phong cách tổng thể thanh lịch với Bootstrap,
  đánh dấu mã với Pygments,
  hiển thị phương trình toán học với MathJax
  Tôi hy vọng bạn thích nó và nó sẽ giúp bạn tiết kiệm được vài giờ làm việc
  Xin vui lòng cho tôi biết những gì bạn nghĩ trong các ý kiến. Tôi sẽ cố gắng và trả lời tất cả các câu hỏi
  Và nếu bạn thích bài viết này, bạn có thể đăng ký vào danh sách gửi thư của tôi để được thông báo về các bài đăng mới (tôi hứa không quá một thư mỗi tuần. )
   
  
  Làm cách nào để tích hợp Jupyter Notebook trong HTML?
  1 Lưu Sổ tay của bạn ở định dạng HTML.  . 
   
  Bắt đầu sổ ghi chép jupyter mà bạn muốn lưu ở định dạng HTML. Trước tiên, hãy lưu sổ ghi chép đúng cách để tệp HTML sẽ có phiên bản mã/sổ ghi chép được lưu mới nhất của bạn
   
  Chạy lệnh sau từ chính sổ ghi chép. . jupyter nbconvert --to html your_notebook_name. ipynb
   
  Chúng tôi có thể chuyển đổi HTML sang Ipynb không?
  Đây là một mẹo nhỏ. Lưu tệp html dưới dạng.  txt và sau đó mở nó trong trình chỉnh sửa mã của bạn.  Sau đó đổi tên phần mở rộng tệp thành.  ipynb Điều đó sẽ thực hiện thủ thuật. 
  Làm cách nào để chạy mã HTML trong Python?
  Cách tiếp cận.  . 
   
  Nhập mô-đun
   
  Mở và tạo tệp
   
  Thêm mã html
   
  Viết mã vào tập tin
   
  Đóng tập tin
   
  Mở tệp trong cửa sổ trình duyệt
   
  Tôi có thể sử dụng Jupyter Notebook để phát triển web không?
  Tóm tắt. Để tạo một ứng dụng web tương tác trong Jupyter Notebook, hãy sử dụng ba thư viện ipywidgets , voila và binder . Điều này chỉ yêu cầu các kỹ năng lập trình Python cơ bản mà không cần phải học một framework mới.